Overview

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-label to 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.

Code example
Playroom
3

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.

info-icon
Note
Only a select handful of available colors are shown below. All theme properties and colors are supported.
Code example
Playroom
33333333

Hidden Badges

Badges can optionally be hidden with hide. The default is false.

Code example
Playroom

Minimizing Badges (Dot Badge)

Badges can optionally be minimized with minimize, and will appear as a dot. The default is false.

Code example
Playroom

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.

Code example
Playroom
0

Maximum-value Badges

To cap the value of a badge, provide a numerical max value. The default is 99.

Code example
Playroom
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

Code example
Playroom
3

Bottom

Code example
Playroom
3

Circular

Code example
Playroom
3

Rectangular

Code example
Playroom
3

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.

Code example
Playroom

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.

Code example
Playroom
3

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

NameTypeDefaultDescription
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.
*
 required