Badge

Highlights important information such as notifications or counts in a non-intrusive way. Badges are typically used in conjunction with other elements like icons or navigation links.

Basic Usage

Default badge styles and variants.

Badge defaultBadge accentBadge primaryBadge secondaryBadge tertiaryBadge successBadge dangerBadge warningBadge info

BasicUsage.tsx

<Row flexWrap>
  <Badge default>Badge default</Badge>
  <Badge accent>Badge accent</Badge>
  <Badge primary>Badge primary</Badge>
  <Badge secondary>Badge secondary</Badge>
  <Badge tertiary>Badge tertiary</Badge>
  <Badge success>Badge success</Badge>
  <Badge danger>Badge danger</Badge>
  <Badge warning>Badge warning</Badge>
  <Badge info>Badge info</Badge>
</Row>

Badge Sizes

Badges come in different sizes.

Badge xsBadge smBadge mdBadge lgBadge xl

BadgeSizes.tsx

<Row flexWrap>
  <Badge xs>Badge xs</Badge>
  <Badge sm>Badge sm</Badge>
  <Badge md>Badge md</Badge>
  <Badge lg>Badge lg</Badge>
  <Badge xl>Badge xl</Badge>
</Row>