Badge API

Import

import { Badge } from "@stratakit/bricks";
// OR
import Badge from "@stratakit/bricks/Badge";

Badge Deprecated

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={…} />

label

Type:ReactNode(required)

The label displayed inside the badge.

icon

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.

tone

Type:"neutral" | "accent" | "info" | "positive" | "attention" | "critical" | undefined(optional)

Default:"neutral"

The tone of the badge.

variant

Type:"solid" | "muted" | "outline" | undefined(optional)

Default:"solid"

The variant style of the badge.

Additional props

• render