Display an indicator that requires attention.
Show number or text.
Express state in different colors.
For more colors, please refer to the color section.
Use pulse for a live status. The ring follows the badge color and stops when the user prefers reduced motion.
Fix the Badge in the designated position.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | badge type | BadgeTypes | BadgeTypes | default |
| dot | show dot and ignore content | boolean | - | false |
| pulse | animated ring for live status | boolean | - | false |
| ghost | outline variant: opposite color | boolean | - | false |
| light | light variant: tinted background | boolean | - | false |
| subtle | subtle variant: no background | boolean | - | false |
| ... | native props | HTMLAttributes | 'alt', 'id', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| placement | fixe position of Badge | AnchorPlacement | AnchorPlacement | topRight |
| ... | native props | HTMLAttributes | 'alt', 'id', 'className', ... | - |
type BadgeTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
type AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'