Pill

Pill displays a number inside a badge-like element.

#

#

#

Use this variant for counts that require action, like notifications and warnings.

#

Small

11234

Medium

11234

#

#

  • 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.

variant

"primary" | "danger"

Determines color scheme.

size"md""sm" | "md"

The pill size

On this page

  • Example
  • Variants
  • Alert
  • Sizes
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props