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)

primary success danger warning info dark

Light Badges (Subtle)

primary success danger warning info dark

Outline Badges (Minimal)

primary success danger warning info dark

<!-- 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.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan

<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>