Badge
Displays a badge or a component that looks like a badge.
Loading demo: badge-real-world
Installation
npx sdaia-ui@latest add badge
Usage
import { Badge } from "@/components/ui/badge"<Badge>Label</Badge>Examples
Size
Use the `size` prop to change the size of the badge.
Loading demo: badge-size
Default
The default Soft badge with Neutral colour.
Loading demo: badge-default
Solid
Use `style="Solid"` for a high-contrast filled badge.
Loading demo: badge-solid
Primary
Use `color="Primary"` to apply the brand primary colour.
Loading demo: badge-primary
Destructive
Use `color="Error"` to signal a critical or error condition.
Loading demo: badge-destructive
Pill
Use `pill={true}` for a fully rounded pill-shaped badge.
Loading demo: badge-pill
Icon
Use `iconOnly={true}` to render the badge with an icon and no label.
Loading demo: badge-icon
API Reference
BadgeProps
Props for the Badge component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
size | 'sm' | 'md' | 'lg' | 'md' | optional |
variant | 'soft' | 'solid' | 'soft' | optional |
color | 'neutral' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'error' | 'neutral' | optional |
pill | boolean | false | optional |
iconOnly | boolean | false | optional |
leadingIcon | ReactNode | - | optional |
trailingIcon | ReactNode | - | optional |