Badge API
- Component status:
-
stable
Import
Section titled “Import”import { Badge } from "@stratakit/bricks";// ORimport Badge from "@stratakit/bricks/Badge";
Base element:
<span>
A badge component, typically used to designate the status of an item.
Example:
<Badge label="Value" /><Badge label="Value" tone="info" variant="outline" icon={…} /> Type:
ReactNode (required) The label displayed inside the badge.
Type:
string | Element | undefined (optional) Icon to be displayed at the start of the badge.
Can be a URL of an SVG from the @stratakit/icons package,
or a custom JSX icon.
Type:
"neutral" | "accent" | "info" | "positive" | "attention" | "critical" | undefined (optional) Default:
"neutral" The tone of the badge.
variant
Section titled “variant” Type:
"solid" | "muted" | "outline" | undefined (optional) Default:
"solid" The variant style of the badge.