Badge

A small pill for counts and labels. Its size follows the text around it.

Status: Paid

Colors

Badges are secondary by default. A color class changes the color.

Primary Secondary Contrast Accent Info Success Warning Danger Link

Primary Info Danger

Variable	Default
`--i-badge-font-size`Relative to the surrounding text, so a badge fits headings and buttons	`0.75em`
`--i-badge-padding-block`	`0.125em`
`--i-badge-trimmed-padding-block`Used where text-box trims the line to the cap height, for the same height	`0.4em`
`--i-badge-padding-inline`	`0.5em`