Badge
The Badge component serves as a small count and labeling tool that overlays its content on another
element, typically used for displaying notifications, status, or additional info like new messages or
alerts. It's designed to draw attention to specific elements by showing relevant numbers or indicators.
Quick Start
To start using the Badge component, import it from the reablocks library and provide the content prop.
Examples
Basic Usage (Color Variations)
The Badge component can be styled with various colors to indicate different statuses or priorities. Here's how to display badges with default, primary, secondary, and error color schemes:
Advanced Usage (Position Variations)
The position of a Badge relative to its child component can be customized to appear in various locations like top-start, top-end, bottom-start, and bottom-end:
Theme Customization
The Badge component comes with a default theme that can be customized according to your application's design system:
- root{}(6 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Customize the Badge component through the following properties:
| Prop | Description | Default |
|---|---|---|
content | The content of the badge.string | Element | |
color | The color of the badge.string | default |
disableMargins | Whether to disable the margins.boolean | |
hidden | Whether the badge is hidden or not.boolean | |
placement | The placement of the badge.BadgePlacement | top-end |
theme | Theme for the Budge.BadgeTheme | |
ref | Reference to the HTML span element.LegacyRef<HTMLSpanElement> |
Design and Usability Tips
- Visibility at a Glance: Design badges to be easily scannable, using minimal text or numbers and high-contrast colors to stand out from their background.
- Avoid Overuse: Use badges sparingly within the interface to prevent dilution of their significance; too many badges can overwhelm users and diminish their attention-grabbing effect.