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

Use .bg-*-subtle for a light colored badge.

Use .bg-transparent and .border utility classes for outline badges.

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

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

Example h1 New

Example h2 New

Example h3 New

Example h4 New

Example h5 New

Example h6 New

Badges can be used as part of links or buttons to provide a counter.