Badge
Badge is a compact passive label for categories, status, or short metadata.
Built from the published package
Know when Badge is the right part
Use it when
Use it for short labels whose meaning is understandable in surrounding content.
Choose another path when
Do not use Badge as a button, form control, live status announcer, or overlay count. Use NotificationBadge for a count or dot attached to another element.
Installation and imports
The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:
Add the modular stylesheet for every other Brick component the route renders.
Do not combine modular styles with styles.css or tokens.css.
Quick start
Visual recipes and states
Variant changes fill and boundary, tone changes semantic color, size changes the complete label, and shape selects rounded or pill geometry. Badge is passive and has no interactive state.
Examples
API
Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.
Badge's public exports are Badge, BadgeProps, BadgeVariant, BadgeTone,
BadgeSize, and BadgeShape. The shared badge subpath also exports the
separately documented Notification Badge family.
| Prop | Values | Default |
|---|---|---|
variant | soft, solid, outline | soft |
tone | neutral, accent, info, success, warning, danger | neutral |
size | sm, md, lg | md |
shape | rounded, pill | rounded |
Atom/native span props are inherited except native color.
Accessibility
Badge contributes its text to normal reading order. Do not rely on tone alone or use it as the only announcement of an asynchronous change.
Responsive behavior
Badge sizes to its content and does not own responsive layout. Keep labels short; surrounding layout owns wrapping and truncation.
Styling and tokens
Customization
Prefer recipe props, then semantic and public Badge tokens. Use className and
style for scoped exceptions while maintaining contrast.
Tokens and CSS hooks
Stable hooks are .brick-badge, Atom slot badge, and data-variant,
data-tone, data-size, data-shape. Public tokens are
--brick-badge-background, --brick-badge-foreground,
--brick-badge-border-color, --brick-badge-min-block-size,
--brick-badge-inline-padding, --brick-badge-block-padding,
--brick-badge-font-size, --brick-badge-radius,
--brick-badge-tone-solid, --brick-badge-tone-on-solid,
--brick-badge-tone-soft, --brick-badge-tone-on-soft,
--brick-badge-tone-border, and --brick-badge-tone-text.
Advanced reference
Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.