Badge
Badges are small count and labeling components used to add additional information or to highlight new or important content.
Effective Practices
When using badges, consider the following best practices:
- Keep the text short. Badges are meant for brief information.
- Use colors to convey meaning: “success” for positive indicators, “warning” for cautions, and “error” for alerts.
- Be mindful of color contrast to ensure accessibility.
- Avoid overloading the interface with too many badges to prevent visual clutter.
Usage Guidelines
Use combinations of color and size to create badges that fit your needs and convey the right message.
We’ve provided a few examples to get you started.
Colors
default
The default badge, typically used for neutral or less urgent information.
<Badge>Default</Badge>success
Use to indicate success, completion, or positive trends.
<Badge color="success">Success</Badge>warning
Use to signal caution or to draw attention to potential issues.
<Badge color="warning">Warning</Badge>error
Use for errors, warnings, or to attract immediate attention to critical issues.
<Badge color="error">Error</Badge>Sizes
sm
Use for smaller badges when space is limited.
<Badge size="sm">New</Badge>default
The standard size for badges. Use for most cases.
<Badge>Default Size</Badge>Props
Content of the badge. Can be text, icons, etc.
Sets the color of the badge.
Sets the size of the badge.