Badge

Badge — Prism component.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

• Use it when A small status or count label attached to content.
• Reach for something else when Interactive filters — use Tag.

Accessibility

Fully keyboard operable: Tab to focus, Enter/Space to activate. The visible focus ring uses --focus-ring — never remove it. Provide an accessible label (aria-label) for icon-only controls.

Import

const { Badge } = window.PrismDesignSystem_39d121;

Props

Prop	Type	Required	Description
tone	"neutral" | "accent" | "positive" | "notice" | "negative" | "info"	—
variant	"subtle" | "solid"	—	subtle (tinted) or solid (filled).
icon	React.ReactNode	—	Optional leading icon — recommended for semantic tones.
dot	boolean	—	Show a small leading status dot (Helios-style) in the tone color.
children	React.ReactNode	—
className	string	—