Badge

Badges display additional metadata related to a resource they're nearby.

Subtle

Coming soon

Primary

Recommended

Danger

Deprecated

Danger Outline

Production

Warning

Warning

Success

New

Beta

Beta

Upsell

Upgrade

#

#

Use the subtle variant to display information in a neutral tone. This is the default variant.

#

Use the primary variant to display information in a primary tone.

#

Use the danger variant to display negative or immediately concerning information.

#

Use the danger outline variant similarly to the danger variant, but in a less harsh tone.

#

Use the warning variant to display information in an alerting tone.

#

Use the success variant to display information in a positive or successful tone.

#

Use the beta variant to display information in beta.

#

Use the upsell variant to display information about billing plans or unlockable product features.

#

When a badge is small, it has a smaller font size and a height of 20px.

#

Icons can be used in badges when additional clarity is required and the icon is highly relevant. Icons should not be used for decoration.

Icon colors can be overridden with the iconColor prop. Use this only when a different color is highly relevant.

#

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

If truncated, use the same variant as size props on the BadgeGroup as it's children Badges. These styles will determine the appearance of the "more" button.

By default the badge group will render popover content in a portal. To disable this pass removePortal.

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.

#

#

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

#

Prefer one or two words max.

#

#

Inherits margin props.

NameDefaultDescription
children

ReactNode

Badge text.

variant"subtle""subtle" | "primary" | "danger" | "dangerOutline" | "warning" | "success" | "upsell" | "beta"

Badge variant determines the purpose it is used for, and it's appearance.

size"md""sm" | "md"

Determines the size of the badge.

icon

ComponentType<SVGAttributes<SVGElement>>

Badge icon that's displayed on the left.

iconColor

ColorProps["color"]

Override the default icon color.

#

Root-level component for displaying groups of badges.

All Badge components must be children of BadgeGroup.

Inherits margin props.

NameDefaultDescription
truncatetrueboolean

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

removePortalfalseboolean

Determines if the popover content is rendered in a portal.

variant"subtle"BadgeProps["variant"]

Determines the appearance of the "more" button, if applicable. Use the same variant as the group's children badges.

size"md"BadgeProps["size"]

Determines the size of "more" button, if applicable. Use the same size as the group's children badges.

children

ReactNode

Badges.

On this page

  • Usage
  • Subtle
  • Primary
  • Danger
  • Danger Outline
  • Warning
  • Success
  • Beta
  • Upsell
  • Small
  • Icons
  • Groups
  • Guidelines
  • Placement
  • Content
  • Props
  • Badge
  • BadgeGroup