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 label for the clear button. Rarely needed: unset, the name is **composed** from the localized badge.clearLabel verb and the badge's own text — "Remove Italy", not a bare "Remove" — which is already the right name in almost every case. Composition is skipped when a BbBadgeButton owns the body (the verb then stands alone, so the two controls do not both announce the label). Set this only to override that composed name outright.

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.

Shows a spinner in place of the leftmost icon, mirroring BbButton: it replaces the icon glyph or the prepend:icon when one is set; when the append:icon is the sole icon it replaces that instead (e.g. a select-activator chevron while the value saves), and with no icons at all it takes the leading slot. Adds a visually hidden loading announcement for screen readers.

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. State: loading.

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. Register more via the vite plugin badgeVariants option and style .bb-badge--<variant> (set --bg / --fg). 'none' renders no variant class — an escape hatch for a one-off look set through --bg / --fg on the element.

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 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.