Badge
A small semantic label chip for status, category, and metadata.
Controls
import { Badge } from "raft-ui";
<Badge />appearancedefault: "solid""solid" | "soft" | "outline"
Visual treatment. Solid keeps the current filled badge, soft uses the lighter token ramp, and outline uses a transparent fill with a semantic border.
variantdefault: "default""default" | "primary" | "information" | "muted" | "accent" | "success" | "warning" | "danger"
Semantic label/status variant. Uses shared semantic color tokens instead of raw palette color names.
renderReactElement | (props, state) => ReactElement
Swap the root element. Use render={<button type="button" />} for the old BadgeButton shape.
...propsBase UI useRender span props
Native span attributes plus Base UI render composition props.
| 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 palette color names. |
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. |