Badges

Badges in Headings

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

Heading 1 New

Heading 3 Update

Heading 5 Pro

<h1>Example Heading <span class="badge bg-primary">New</span></h1>
<h3>Example Heading <span class="badge bg-info">Update</span></h3>

Positioned Badges

Use utilities to position a badge at the corner of a link or button, commonly used for notifications.

<!-- Simple Counter -->
<button class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>
</button>

<!-- Soft Notification Dot -->
<button class="btn btn-secondary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle"></span>
</button>

Professional Theme Styles

Explore our premium badge variations: Solid, Light (Soft), and Outline.

Solid Badges (Default)

primarysuccessdangerwarninginfodark

Light Badges (Subtle)

primarysuccessdangerwarninginfodark

Outline Badges (Minimal)

primarysuccessdangerwarninginfodark

<!-- Solid Style -->
<span class="badge badge-primary">Solid</span>

<!-- Light Style (Custom) -->
<span class="badge badge-light-success">Soft</span>

<!-- Outline Style (Custom) -->
<span class="badge badge-outline-info">Minimal</span>

Advanced Palette

Standard colors from our design system palette.

BlueAzureIndigoPurplePinkRedOrangeYellowLimeGreenTealCyan

<span class="badge badge-red">Red</span>
<span class="badge badge-light-blue">Light Blue</span>
<span class="badge badge-outline-purple">Outline Purple</span>