PillGroup · Bref documentation

Usage

Draft
In review
A longer category that wraps on small screens

Svelte

<script lang="ts">
	import { PillGroup } from 'bref-ui';
	import type { PillDataProps } from 'bref-ui/types';
	const items: PillDataProps[] = [
		{ id: 'draft', label: 'Draft', icon: { name: 'draft' } },
		{ id: 'review', label: 'In review' }
	];
</script>

<PillGroup {items} aria-label="Document categories" />

Playground

Live preview

Draft
In review
A longer category that wraps on small screens

Settings

Appearance

Size

Variant

Color

Glass

Content

Item icons

Long labels

Interaction

Enable delete

Moving background

View generated code

Svelte

<script lang="ts">
	import { PillGroup } from 'bref-ui';
	import type { PillDataProps } from 'bref-ui/types';
	let items = $state<PillDataProps[]>([
		{
			id: 'draft',
			label: 'Draft',
			icon: {
				name: 'draft'
			}
		},
		{
			id: 'review',
			label: 'In review'
		},
		{
			id: 'long',
			label: 'A longer category that wraps on small screens'
		}
	]);
</script>

<PillGroup
	{items}
	size="medium"
	variant="neutral"
	color="foreground"
	glass={false}
	aria-label="Document categories preview"
	onDelete={(id) => (items = items.filter((item) => item.id !== id))}
/>

x-small

Draft
In review
A longer category that wraps on small screens

small

Draft
In review
A longer category that wraps on small screens

medium

Draft
In review
A longer category that wraps on small screens

large

Draft
In review
A longer category that wraps on small screens

x-large

Draft
In review
A longer category that wraps on small screens

Props and native behavior

PillGroup props
Prop	Type	Required	Default	Description
`items`	`readonly PillDataProps[]`	Yes	`—`	Items with unique IDs, labels and optional icons.
`onDelete`	`(id: string) => void`	No	`Omitted`	Show delete buttons and report the item ID; the consumer updates items.
`size`	`Size`	No	`medium`	Pill size.
`variant`	`Variant`	No	`neutral`	neutral, soft or filled.
`color`	`Exclude<Color, 'background'>`	No	`foreground`	Theme color shared by the Pills.
`glass`	`boolean`	No	`false`	Translucent paint and backdrop blur for every Pill.

PillGroup accepts native list attributes. Give the list an accessible name when its context does not identify it. Delete callbacks report an ID; update the list in the consumer.