Badge

Use the <Badge /> component to quickly communicate the current status of an item. You can place the badge before or after the item, but make sure that it's clear what item the status relates to. For tallies and counts, use the NumberBadge.

NOTE: For displaying labels or contextual attributes related to a component/item, use the Tag instead of a badge.

The label is the primary representation of the current status of the item. Keep the label text succinct and in an active voice, often using no more than 1-2 words.

To support the label, the tone prop helps convey the semantic meaning of the status.

Show codeCopy code

Across different ELMO products, status badges are used widely to communicate the stage an item is currently in.

Below are the recommended badge colours for some of the most common status labels used across ELMO product suite. New status badge label or colour should only be introduced when there is a new, specific use case.

The weight prop controls the visual weight of the badge to be either subtle (default) or bold.

Show codeCopy code

"Mapping" a status label to a suitable semantic tone can be hard. Here's a contrived example of a status system, representing the state of a training course.

NOTE: Combined labels and tones can be different depending on the product and the features it supplies. In many cases you might find that you don't need to use all of the available tones for a particular status system.

Show codeCopy code

If space is limited you can set a maxWidth on the badge. This will truncate any overflowing text in the label. The default max width is 100%, so alternatively you can set a width on the parent element to achieve the same effect (denoted below with a border). Avoid truncation of text where possible, as it hides information from the user.

Show codeCopy code

Use the <NumberBadge /> component when you need to notify the user about a tally or count. It only accepts a numeric value via its number prop, and supports all the same semantic tones as <Badge />. The default tone is informative. It also supports the weight prop, which defaults to bold.

Show codeCopy code

When the number is expected to exceed a certain point, and the exact number is not particularly valuable to the user, you can optionally "cap" the number of the badge. When the number is greater than the cap value, the cap value will be displayed along with a +.

Show codeCopy code