Badge

A badge is used to bring attention to an element.

A badge will communicate a small piece of information that users may be interested in, but would not impede them from achieving their task. They can also display the amount of item for an object.

Usage

Disabled

A disabled badge is usually used inside other components that may be disabled, like a tag or a list box.

Indeterminate

An indeterminate badge is used when the value is unknown or not applicable.

Variants

The different variants of a badge.

High Count

If a value above 99 is needed, use 99+ instead of the number.

Text

A badge can have any text content.

Best Practices

Badges benefit users by:

Being clearly labeled with short, scannable text
Being positioned to clearly identify the object they're informing or labelling.

Qualificative Badges

Badges can be used to qualify an object with a word or two. Most likely, badges will be used in specific situations, but are not limited to:

New: to announce a new functionality or feature in Workleap. This badge should have a defined lifespan where at the end it is removed.
Beta: to highlight that a functionality or feature is being released early to test and gather feedback. This badge should be accompanied by a Popover to provide more information to the user. This badge should have a defined lifespan where at the end it is removed.

Quantitative Badges

Badges can also be used to count the number of item for an object. To ensure the best scannability quantitative badges should:

Not be displayed if the count is at zero.
Display “+99” if the count goes beyond 99 items.
Use the same interaction state of the related object.

Props

variant?

The visual style of the badge.

Defaults to primary.

isDisabled?

Whether or not the badge is disabled.

isIndeterminate?

Whether or not the badge is indeterminate and should just be a dot. This will ignore any children.

children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

highlight is not supported.
pushed is not supported.
reverse is not supported, use flex-direction or row-reverse instead.
size is not supported.
variant has different values.
icon variant it not supported.
wrapperProps has been removed.
Badge is no longer floating. Use the FloatingBadge component to add this feature.
FloatingBadge has new props such as placement and offset.
overlap is used inside FloatingBadge and the new values are circular and rectangular.