Badge
Compact semantic label for status or classification.
Add it to your project
Eject the complete badge group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject badgebash
npx toucan eject badgeapp.tsx
import { Badge } from '@/components/toucan/badge';Use when
A short status, category, or count needs visual emphasis.
Avoid when
The message requires explanation or an action; use Alert.
Example
NeutralInfoSuccessWarningDangerCustom
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Badge
Badge
Props type: BadgeProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
live | boolean | false | No | Announce badge content changes through a polite live region. |
onSurface | string | undefined | No | Custom CSS colour for content when using the custom variant. |
size | "sm" | "md" | "lg" | 'md' | No | Visual size variant. |
surface | string | undefined | No | Custom CSS background colour when using the custom variant. |
variant | "info" | "success" | "warning" | "danger" | "custom" | "neutral" | "primary" | 'neutral' | No | Semantic visual variant. |
Also accepts the native span attributes that are not replaced by a Toucan prop.
Type exports
BadgeProps
Accessibility
- Colour is paired with text.
- Enable live only for status changes that need announcement.
Token families
badgecolor