Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Label Badge Group

Label badge group is used to display multiple label badges and collapse them to a single line, if necessary.

#

#

#

LabelBadgeGroup truncates badges by default and renders them in one line. Badges that didn't fit can be viewed by clicking the "+1" button at the end of the badge group.

#

When badge group is not constrained by the parent container and has the ability to show all badges without truncation, pass truncate={false} to disable it.

#

#

  • Only use this component for displaying groups of label badges.

#

Inherits margin props.

NameDefaultDescription
truncatetrueboolean

Display as much label badges as possible on a single row and show the rest in a popover.

children

ReactNode

Label badges.

On this page

  • Example
  • Usage
  • Truncate badges
  • Don't truncate badges
  • Guidelines
  • When to use
  • Props