Badge

View in Storybook

Anatomy

Our Badge is predominantly shown as a highlighting label indicator but consumers can add additional iconography. We support two sizes: Tiny and Small.

1. iconLeft (optional): To support a badge label's context.
2. Label: The description of a badge.
3. iconRight (optional): Additional iconographic support. Leading icon is preferred.

Variants

There are 6 main styles, but we also support additional colours in more detailed sections of the product. All variants have a Bold and Inverted style and conform to our base WCAG 2.0 AA colour compliance.

	Info   Communicates helpful information or an important attribute. For example, 'New' or 'Help'.

	Success   Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.

	Warning   Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.

	Danger   Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.

	Discover   Highlights a suggestion that will improve the experience and achieve better results. For example, 'Updated' or 'What's new'

	Muted   Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.

Additional colourways

Other colour styles can be used when we are working on status updates for features, tasks or integrations.

Usage

The placement of Badge varies depending on its circumstances. Certain components will have them available in the props and in other examples consumers can display them using our available slots.

	Importance   Use the Danger color variant to call attention to more urgent notifications.

	Dot   Notification dots are generally placed next to iconOnly buttons but can also be displayed on text buttons.

	Nested   When a Badge is already available in a component they are displayed inline before or after the label of the item they are highlighting. Examples here are Menu and Tooltip

	Larger component patterns   In more complex components like Card and Modal we provide slots where consumers can include Badge.

HotKey badge

The placement of Badge varies depending on its circumstances. Certain components will have them available in the props and in other examples consumers can display them using our available slots.

Best practice

A badge to used to support key information of a title or whole section of information. It should be visible enough to be understood, but not dominate.

• A badge must always have a label.
• The label should be short so its messaging is clear to a user - a maximum of 3 words.
• When displayed next to additional content, it must sit inline.

Do's and Don'ts

Also see

• InlineStatus
• Tag
• Tooltip