Badge

A small label to display tags and counts
<Badge>Hello</Badge>

<Badge>

import { Badge } from '@strum/react';
name
type
default
borderRadius
ConditionalStyle<Values<{ large: CSSVarFunction; medium: CSSVarFunction; none: CSSVarFunction; circle: CSSVarFunction; extraLarge: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
medium
color
"accent" | "neutral" | "error" | "success" | "warning"
accent
<Stack direction="horizontal">
<Badge color="accent">Accent</Badge>
<Badge color="neutral">Neutral</Badge>
<Badge color="error">Error</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="success">Success</Badge>
</Stack>
<Stack direction="horizontal">
<Badge>Default</Badge>
<Badge borderRadius="pill">Pill</Badge>
</Stack>
<Stack alignItems="flex-start">
<Heading level="1">
Heading 1 <Badge>Hello</Badge>
</Heading>
<Heading level="2">
Heading 2 <Badge>Hello</Badge>
</Heading>
<Heading level="3">
Heading 3 <Badge>Hello</Badge>
</Heading>
</Stack>

Use badges within buttons for small status our counter text.

<Stack alignItems="flex-start">
<Button>
Notifications <Badge color="neutral">3</Badge>
</Button>
<Button>
Submit <Badge color="warning">Careful!</Badge>
</Button>
</Stack>