1. Components
  2. Badge

Badge

A label used to display the status, category, or emphasis of an item.

Size

BadgeBadgeBadge

Variant

BadgeBadgeBadge

Intent

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

There are also intents black and white that only implement variants primary and outline that aren't displayed here.

Type

There are two types of badges: text and number, with text as the default. Unlike text, number renders a smaller x-padding and enforces a minimum aspect ratio of 1 / 1.

Number

number should be used when displaying numbers such as statistics.

555555555555555555

number badges intentionally doesn't check its children for type. It's intended for numbers, but other types implementing .toString() will work as well.