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.