Open this component in Storybook
The <dsgn-badge> component displays compact status indicators, labels, or tags. Use badges to draw attention to states, counts, or categorizations within your interface.
Usage
<dsgn-badge>New</dsgn-badge>Import the component module in your application entrypoint:
import '@ds-gn/ui/badge';Playground
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'brand' | 'accent' | 'success' | 'warning' | 'error' | 'default' | Visual style of the badge. |
| size | 'sm' | 'md' | 'md' | Badge size. |
| surface | 'light' | 'dark' | 'light' | Semantic token surface to use. |
Slots
| Slot | Description |
|---|---|
| (default) | Badge label. |
Examples
Variants
<dsgn-badge variant="default">Default</dsgn-badge>
<dsgn-badge variant="brand">Brand</dsgn-badge>
<dsgn-badge variant="accent">Accent</dsgn-badge>
<dsgn-badge variant="success">Success</dsgn-badge>
<dsgn-badge variant="warning">Warning</dsgn-badge>
<dsgn-badge variant="error">Error</dsgn-badge>Sizes
<dsgn-badge size="sm">Small</dsgn-badge> <dsgn-badge size="md">Medium</dsgn-badge>Dark surface
<dsgn-badge variant="accent" surface="dark">Dark Surface</dsgn-badge>