Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Badge

Badges carry additional non-important information or tips related to a resource they're nearby.

#

#

#

  • Always position a badge immediately after the resource they're related to.

#

  • Prefer one or two words max.
  • Avoid numbers.

#

Inherits margin props.

NameDefaultDescription
children

ReactNode

Badge text.

On this page

  • Example
  • Guidelines
  • Placement
  • Content
  • Props