Badge

A badge is used to bring attention to an element.

View sourceView on npmReport an issue

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.

aria-label?

Defines a string value that labels the current element.

aria-labelledby?

Identifies the element (or elements) that labels the current element.

aria-describedby?

Identifies the element (or elements) that describes the object.

aria-details?

Identifies the element (or elements) that provide a detailed, extended description for the object.

slot?

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

Examples

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.

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.