Badge
A small semantic label chip for status, category, and metadata.
In Progress
Controls
import { Badge } from "raft-ui";
<Badge />DefaultPendingOpenSavedNewLiveWarningFailed
defaultprimaryinformationmutedaccentsuccesswarningdanger
defaultprimaryinformationmutedaccentsuccesswarningdanger
defaultprimaryinformationmutedaccentsuccesswarningdanger
task #42 @bugenIn Progress
ApprovedOnlineAvailable
SyncingLoading
Experimental
Live
Release channel
Warning
deploy:warning
Retry
Sync failed
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | "solid" | "soft" | "outline" | "solid" | Visual treatment. Solid keeps the current filled badge, soft uses the lighter token ramp, and outline uses a transparent fill with a semantic border. |
variant | "default" | "primary" | "information" | "muted" | "accent" | "success" | "warning" | "danger" | "default" | Semantic label/status variant. Uses shared semantic color tokens instead of raw brutal color names. |
uppercase | boolean | false | Apply the Brutal badge casing recipe: uppercase plus wider tracking. Elegant preserves the caller's casing. Defaults off so case-sensitive content stays intact. |
render | ReactElement | (props, state) => ReactElement | — | Swap the root element. Use render={<button type="button" />} for the old BadgeButton shape. |
...props | Base UI useRender span props | — | Native span attributes plus Base UI render composition props. |