Badge
Display an indicator that requires attention.
General
Show number or text.
Default
Type
Express state in different colors.
Default
Primary
Secondary
Success
Warning
Error
Info
Custom color
For more colors, please refer to the color section.
Success Light
Alert
Purple
Violet
Anchor
Fix the Badge in the designated position.
APIs
Badge.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | badge type | BadgeTypes | BadgeTypes | default |
| dot | show dot and ignore content | boolean | - | false |
| ... | native props | HTMLAttributes | 'alt', 'id', 'className', ... | - |
Badge.Anchor.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| placement | fixe position of Badge | AnchorPlacement | AnchorPlacement | topRight |
| ... | native props | HTMLAttributes | 'alt', 'id', 'className', ... | - |
BadgeTypes
type BadgeTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
AnchorPlacement
type AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
Previous
Avatar
Next
Breadcrumbs
MADE & DESIGNED WITHBY BRUNO ANDRADE
