Badges are indicators which emphasize a status, count, state or value.

Using Badges

Badges are best used in conjunction with other components. They're placed inline or directly next to the thing it's measuring or indicating. Values provided by badges can be a simple word like "Primary" in the case of metrics, or a number like "7" when indicating the lines of code saved in the editor.

Example

Properties

property	propType	required	default	description
color	oneOf 'default' | 'draft' | 'live' | 'primary' | 'plain' | 'bad-news'	-	'default'	Various color schemes
children	node	yes	-	Text that appears within the component
testSection	string	-	-	Hook for automated JavaScript tests

Kinds of Badges

There are various kinds of badges to use in different situations. Badges are visually distinct from each other based on thier color.

Default

Use this when you're not sure what else to use.

Draft

Indicate the number of draft changes in the editor.

Live

Indicate the number of live changes in the editor.

Primary

Indicates when something is primary, such as primary metric, or showing what user is currently logged in.

Plain

A subtle badge. Use this when there are many badges on the screen, or when you need a more subdued indicator.

Bad News

Use when the count or label is dangerous, for example when an action failed or will result in potential data loss.

Using with Text

Badges can also be used with text.

Best Practices