Badge
Badges indicate notifications or events that are relevant and relatively close to or overlapping another element, like a button or an icon.
Best Practices
- Badges convey information about notifications or events.
- Badges appear very close to, often overlapping, the element that they are describing.
- Badges should make it easy to understand the presence of notifications or events, encouraging action to be taken on the element the badge describes.
- Badges should always be wrapped in an accessible element with a proper
aria-labelto be read by screenreaders. The wrapping element will depend on the context with which you use the badge (see below for examples).
Examples
Basic Badges
Badges always require a value.
Badge Colors
EzBadge supports theme palette properties (primary, secondary, error, warning, alert, info, and success) as well as all supported theme colors (ex. common.red100).
Out of the box, badges have a background color of common.alert100 and font color of common.neutral100. Text and background colors should have high enough contrast for accessibility.
Hidden Badges
Badges can optionally be hidden with hide. The default is false.
Minimizing Badges (Dot Badge)
Badges can optionally be minimized with minimize, and will appear as a dot. The default is false.
Zero-value Badges
By default, badges will automatically hide when the value is 0. You can override this with the showZero prop, which defaults to false.
Maximum-value Badges
To cap the value of a badge, provide a numerical max value. The default is 99.
Aligning Badges
The default alignment for a badge is top right. To align a badge with its wrapped element, use alignX with left or right and alignY with top or bottom.
To align the badge relative to the corner of the wrapped element, use overlap with a value of circular or rectangular, depending on the shape of the wrapped element. The default is rectangular.
Left
Bottom
Circular
Rectangular
Standalone Badges
Standalone badges can be used next to other elements, instead of wrapping them. Ensure they are still accessible by wrapping both elements with an element that has an aria-label.
Accessibility
Badges should be wrapped in an accessible element with a proper aria-label to be read by screenreaders. The wrapping element will depend on the context with which you use the badge.
Custom Styles
Supported styles should be used, but if you need to overwrite styles for the badge or dot, you can do so using provided class names (EzBadge, EzBadge-badge, and EzBadge-dot).
Props
| Name | Type | Default | Description |
|---|---|---|---|
value* | node | The content inside the badge. | |
alignX | left | right | right | Horizontal alignment of the badge relative to its wrapped element. |
alignY | top | bottom | top | Vertical alignment of the badge relative to its wrapped element. |
children | node | The content that the badge wraps. | |
color | EzThemeColors | error | The color of the component. Supports theme palette properties and colors. |
hide | boolean | false | Optionally hide the badge. |
max | number | 99 | Cap the badge content value at the max value. For example, if the value is 100 and the max is 99, the display value will be 99+. |
minimize | boolean | false | Minimize the badge. The badge will appear as a smaller dot, without interior content. |
overlap | circular | rectangular | rectangular | The wrapped shape the badge overlaps. |
showZero | boolean | false | Optionally show the badge when value is 0. |