Badge
Badges display compact status, counts, or inline labels next to headings and controls.
Try it
Beta
Usage
import { RuiBadge } from '@ecopages/radiant-ui/badge';
<RuiBadge variant="outline">Beta</RuiBadge>Badge vs chip
Use RuiBadge for status and counts (Beta, 3, Error). Use RuiChip for category tags and filter entities in pill-shaped containers.
With spinner
Place RuiSpinner inside a badge to show a syncing or processing state.
Variants
Error
Theming
variant | Semantic roles |
|---|---|
filled | primary-container, on-primary-container |
outline | border, background, on-background |
destructive | error, on-error |
ghost | on-surface |
muted | surface-container, on-surface |
API
RuiBadge is a presentational JSX view over a <span>, no custom element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | filled · outline · destructive · ghost · muted | filled | Visual tone. |
CSS classes
| Class | Description |
|---|---|
.rui-badge | Badge root. |
.rui-badge--filled | Primary emphasis on primary-container. |
.rui-badge--outline | Bordered badge on background. |
.rui-badge--destructive | Error emphasis. |
.rui-badge--ghost | Subtle text-only badge. |
.rui-badge--muted | Muted surface badge. |