Basic Badge
Simple badge with text
Default Success Warning Error Info
Variants
Different badge variants
Default Success Warning Error Info
Browse components
Badge
Small status label in the semantic tones, plus neutral and energetic.
atoms 5 variants
Variants / states: defaultsuccesswarningerrorinfo
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | Yes | — | Badge text content |
| variant | string | No | default | Badge color variant |
| size | string | No | md | Badge size |