BbBadge

Icon rendered after the label. On a clearable badge it shares the trailing slot with the clear button: the icon shows at rest and the clear button reveals over it on hover/focus.

Renders a trailing clear button and emits click:clear when pressed — turns the badge into a dismissible token (the pattern formerly served by BbChip).

Opt-in, which is the one thing that changed on the way from BbChip: a chip was removable unless told otherwise. Swapping the tag straight across loses the × with no error.

Accessible name of the clear button, whole: set, it is the name on any body ("Remove the filter Deleted"). Rarely needed: unset, the name is composed from the localized badge.clearLabel verb and the badge text ("Remove Italy"), or the verb alone when a BbBadgeButton owns the body.

Set it when a BbBadgeButton owns the body: the × is then named by the bare verb ("Remove"), so the two controls do not both read the label, and "Remove priority filter" says what goes.

Renders an icon-only badge. When set, prepend:icon / append:icon are ignored and the default slot becomes the badge's visually hidden accessible label — always provide it.

Keep writing the label in the slot: it becomes the accessible name. An icon-only badge with an empty slot is an error for npx bitboss-ui check and the ESLint rule require-accessible-name.

Shows a spinner in place of the leftmost icon (icon or prepend:icon; the append:icon when it is the only one; else the leading slot), as BbButton does, with a hidden loading announcement.

Also makes a slotted BbBadgeButton inert: clicks do not reach your @click, a link does not navigate, and the body leaves the tab order until loading clears.

Icon rendered before the label.

Passthrough, object form: { icon: '…', 'icon:loading': '…' } — the same keys as the pt:* attributes without the prefix. Parts: root, icon, spinner, text, clear. States: loading and the registered variants (an app's own included).

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: clear, icon, root, spinner, text. States: activeLink, destructive, exactActiveLink, loading, outline, primary, secondary.

Preset size of the badge.

Pick it from the control standing next to the badge, not from a remembered constant: lg matches an xs button, xl a sm one, 2xl an md one. The default md is sized for running text.

Visual variant: primary, secondary, destructive, or outline. Status colours are a registration (vite plugin badgeVariants, the soft-* palette in design-language.md) styled as .bb-badge--<variant>. 'none' renders no variant class: set --bg / --fg on the element.

Emitted when the clear button is pressed (only rendered when clearable).

Fires when the clear button is pressed. The badge is controlled and removes nothing on its own — drop the item from your own state in the handler. Pressing the × never fires a slotted BbBadgeButton.

The trailing icon, replacing append:icon; inside the icon part.

The badge's label content. When icon is set this becomes the visually hidden accessible label. Render a BbBadgeButton here to make the badge body interactive (the wrapper stays a passive <span>).

A BbBadgeButton here must be a direct child: wrapped in anything else the badge keeps its body and you get a duplicated label. One per badge — there is only one body to take over.

The glyph of an icon-only badge, replacing the icon prop. Renders inside the icon part: pt:icon, --icon-size and the loading spinner apply.

The leading icon, replacing prepend:icon; inside the icon part.