Default

A simple labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

h1.Example heading New

h2.Example heading New

h3.Example heading New

h4.Example heading Info Link

h5.Example heading New

h6.Example heading New

Contextual variations

Add any of the below mentioned modifier Color to change the appearance of a badge.

Primary Secondary Success Danger Warning Info SeLightcondary Dark

Pill Badges

Use the Pill modifier to make badges more rounded.

Primary Secondary Success Danger Warning Info SeLightcondary Dark

Badge positioned

Use utilities to modify a badge and position it in the corner of a link or button.