Badge

A small inline status chip with intent coloring, soft, solid, and outline variants, the shared rounded scale, and an optional dismiss button. It is the building block for selected-option chips.

Import

import { Badge } from "@hyzer-labs/ui"

Demo

The intent vocabulary. The text carries the meaning; color reinforces it.

Casual League Doubles OB Windy Birdie Cart friendly

<Badge>Casual</Badge>
<Badge intent="primary">League</Badge>
<Badge intent="secondary">Doubles</Badge>
<Badge intent="danger">OB</Badge>
<Badge intent="warning">Windy</Badge>
<Badge intent="success">Birdie</Badge>
<Badge intent="info">Cart friendly</Badge>

Open Open Open

<Badge intent="success">Open</Badge>
<Badge intent="success" variant="solid">Open</Badge>
<Badge intent="success" variant="outline">Open</Badge>

rounded takes the shared token scale, the same values every rounded prop in the library speaks. full (the pill) is the default.

18 holes 18 holes

none sm md lg full

<Badge intent="primary" size="sm">18 holes</Badge>
<Badge intent="primary">18 holes</Badge>

<!-- rounded: the shared token scale; full (pill) is the default -->
<Badge rounded="none">none</Badge>
<Badge rounded="sm">sm</Badge>
<Badge rounded="md">md</Badge>
<Badge rounded="lg">lg</Badge>
<Badge>full</Badge>

onDismiss turns a badge into a chip. This is the pattern Combobox uses for its selected options. Note the per-item dismissLabel: screen readers hear "Remove Destroyer" instead of a row of identical "Remove" buttons.

Destroyer Buzzz Aviar

let bag = $state(["Destroyer","Buzzz","Aviar"]);

{#each bag as disc (disc)}
	<Badge
		intent="primary"
		dismissLabel="Remove {disc}"
		onDismiss={() => (bag = bag.filter((d) => d !== disc))}
	>
		{disc}
	</Badge>
{/each}

Props

Name	Type	Default	Note
`children`	`Snippet`	`—`	Required. The badge content.
`intent`	`Intent`	`'neutral'`	See Foundation → Colors & Intent.
`variant`	`'soft' \| 'solid' \| 'outline'`	`'soft'`
`size`	`'sm' \| 'md'`	`'md'`
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'full'`	The shared Rounded scale — 1:1 with the --hz-radius-* tokens.
`onDismiss`	`() => void`	`—`	Renders the trailing remove button (the chip form).
`dismissLabel`	`string`	`'Remove'`	In lists, pass a per-item label — "Remove" alone is ambiguous.
`class`	`string`	`—`	Merged after the hz-badge class.

Theme hooks

What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.

Root class: .hz-badge

Data attributes

Hook	Values	Styles
`data-intent`	`'neutral' \| any registered intent`	Spans the intent registry.
`data-variant`	`'soft' \| 'solid' \| 'outline'`	Default soft.
`data-size`	`'sm' \| 'md'`	Two rungs only, unlike Button. Default md.
`data-rounded`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	Default full — the pill.
`data-dismissible`	`present when dismissible`	Marks the chip form. Always stamped so you can target it.

Custom properties

Hook	Values	Styles
`--hz-badge-tint`	`<percentage> — 14% light, 28% dark`	Soft-variant background tint strength.

Part classes

Hook	Values	Styles
`.hz-badge-dismiss`	`child element`	The remove button.

A badge is plain inline text with no role and no label, so it announces as part of the surrounding content. Never let the intent color be the only signal; the text itself carries the meaning.

The dismiss button is a real <button> named by dismissLabel, with a decorative icon. When rendering several chips, give each a per-item label like Remove Destroyer.