Badge ​

Anatomy

Badge displays a dynamic notification that can be placed within clickable elements such as a button a link, profiles, or avatars. It enhances the component to which it is attached with additional information like counting hidden selections and communicating success, warnings or errors.

Badges are typically positioned as overlays to other components, such as buttons, links or avatars. Don't place badge as a standalone component; always wrapping another element.

Usage guidelines ​

When to use ​

Badges are always part of another component, be it typically links, buttons or avatars, and are used to get users attention. More specifically:

  • To indicate count, e.g. to display the number of unread notifications.
  • To indicate status, e.g. in avatars.
  • To communicate success, warning or errors.

When not to use ​

  • Do not use it to display non-interactive labels: use tags instead.

Writing guidelines ​

  • Length: badge is a visual indicator: when including a text label within a badge, it should be as concise and direct as possible, ideally only one word.
  • Capitalization and case: write badge labels in sentence case.
  • Overflow: for counts greater than 99, use 99+.

Accessibility guidelines ​

Design considerations ​

  • Avoid relying only on color to communicate meaning.
  • When using text, make sure it is as concise as possible while being clear.
  • While using an icon in your badge, make sure it is self-explanatory.
  • Badges that convey information with color only should include additional context with a visually hidden piece of text.

Specifications ​

Anatomy ​

Anatomy
  1. Background: its color is predefined and depends on its state.
  2. Label: (optional) can display a numerical value, a short label or an icon.

Type ​

Anatomy

There are three different types of badge:

  • Dot: ...
  • Text: ...
  • Icon: ...

Size ​

Badge can be displayed in large, medium, small and extra-small sizes.

The size of the badge can be changed by using the corresponding attribute of the component configuration.

Anatomy

Styling ​

As the purpose of badge is to draw attention to content, its appearance is eye-catching. Within each variation of the badge, there are six color options: Zurich Blue , Dark Blue , Sky Blue , Moss , Peach , and Gray-9 .

Badges use varying colors to convey different information to users. Use whichever variation is required for your need and choose the color that best reflects that notification or information. For example, use Dark Blue for info, Sky Blue for alert, Moss for positive, Peach for negative and Gray-9 for disabled.

The color of the background can be changed by using the corresponding attribute or via the --z-badge--bg custom CSS variable.

Colors

Behavior ​

Positioning ​

Badges are typically positioned as overlays to other components, such as buttons, links or avatars. Don't place badge as a standalone component.

Alternatively, badges can be used to draw attention to a list item, e.g. when there are unread notification. Use dot or text variant. Do not use the icon variant.

Use dot or text variants
Avoid using the icon variant

Alignment ​

Notifications badges are typically placed in the top-right corner of the item they're attached to, while status badges, e.g. in avatars, commonly appear on the bottom-right corner.