Compact categorical metadata with neutral and semantic tones, optionally led by a status dot.
NeutralInfoSuccessWarningDangerAccent
neutralinfosuccesswarningdangeraccent
<Badge tone="success">Validated</Badge>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Badge } from '@chanrg/4ui';<Badge tone="success">Validated</Badge>Status dot
Set `dot` when the badge names a live state, so the tone reads at a glance without relying on colour alone.
OnlineDegradedOfflineUnknown
<Badge tone="success" dot>Online</Badge>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | neutral | info | success | warning | danger | accent | neutral | Semantic color treatment. |
dot | boolean | false | Prefixes a small filled dot in the tone color. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Badge text always carries the meaning; color is supplementary.