Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Pill

Pill displays a number inside a badge-like element.

#

#

#

  • Use as an alternative way of displaying a count of something.

#

  • Avoid using pill inside a table cell. Prefer a "raw" text number instead.

#

  • Must contain only numbers.
  • Pill doesn't format numbers, so you'll have to handle it yourself.

#

NameDefaultDescription
children

ReactNode

Number.

On this page

  • Example
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props