Pill · Bref documentation

Usage

Draft

Ready

Featured

Svelte

<script>
	import { Pill } from 'bref-ui';
</script>

<Pill label="Ready" color="success" variant="soft" />

Playground

Live preview

Status

Settings

Appearance

Size

Variant

Color

Glass

Wide

Animate highlight

Content

Label

Leading icon

Icon name

Filled icon

Children snippet

Interaction

Enable click

Enable delete

Moving background

View generated code

Svelte

<script>
	import { Pill } from 'bref-ui';
</script>

<Pill
	label={'Status'}
	size="medium"
	variant="neutral"
	color="foreground"
	wide={false}
	glass={false}
	swoosh={false}
	icon={{ name: 'star', filled: false }}
	title="Native title attribute"
/>

Sizes, colors and variants

Interactions and snippets

Clickable

Removable

Combined

Animated

Content snippet

Clicks: 0; removals: 0

Full-width Pill

neutral

primary

secondary

foreground

muted

info

success

warning

error

soft

primary

secondary

foreground

muted

info

success

warning

error

filled

primary

secondary

foreground

muted

info

success

warning

error

Sizes and long content

x-small

small

medium

large

x-large

A long category label that wraps on a narrow screen without losing its meaning

Glass over a patterned background

Compare glass and regular Pills over a swirling, striped background.

neutral

Without glass

Glass

Removable

soft

Without glass

Glass

Removable

filled

Without glass

Glass

Removable

Svelte

<Pill label="Glass" color="primary" glass />

Props and native behavior

Pill props
Prop	Type	Required	Default	Description
`label`	`string`	Yes	`—`	Visible label.
`icon`	`Omit<IconProps, 'label' \| 'size' \| 'color'>`	No	`Omitted`	Decorative leading icon.
`children`	`Snippet`	No	`Omitted`	Visible content.
`size`	`Size`	No	`medium`	Five sizes from x-small to x-large.
`variant`	`Variant`	No	`neutral`	neutral, soft or filled.
`color`	`Exclude<Color, 'background'>`	No	`foreground`	Theme role.
`onClick`	`(event: MouseEvent) => void`	No	`Omitted`	Activate the Pill.
`onDelete`	`() => void`	No	`Omitted`	Show a labeled remove button.
`wide`	`boolean`	No	`false`	Fill the available width.
`swoosh`	`boolean`	No	`false`	Animate the highlight.
`glass`	`boolean`	No	`false`	Translucent paint and backdrop blur.

Pill accepts native div attributes and a children snippet. A clickable Pill supports Enter and Space; its remove button has a separate accessible name.