Components
Badge
A small concise visual indicator displaying a status notification count or short label.
| small | medium | large | |
|---|---|---|---|
| Neutral | Badge | Badge | Badge |
| Error | Badge | Badge | Badge |
| Warning | Badge | Badge | Badge |
| Success | Badge | Badge | Badge |
| Brand | Badge | Badge | Badge |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | - | The text to display inside the badge. |
| count | number | - | The count to display inside the badge. |
| maxCount | number | 99 | The maximum count to display inside the badge. |
| color | string | bg-gray-200 | The background color of the badge in light mode. |
| darkColor | string | bg-gray-700 | The background color of the badge in dark mode. |
| textColor | string | text-gray-900 | The text color of the badge in light mode. |
| darkTextColor | string | text-gray-100 | The text color of the badge in dark mode. |
| size | small | medium | large | medium | The size of the badge. |
Best Practices
- Highlight notification counts on icons for instant updates.
- Show item status like active, inactive, new with badges.
- Tag or categorize items in lists or card views using badges.
- Display counts compactly, like items in a cart or post likes.
- Label elements with extra context, e.g., `beta` or `coming soon`.