Badges

Documentation and examples for badges, our small count and labeling component.

Examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
HTML
<span class="badge bg-secondary">New</span>

Buttons

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

HTML
<button type="button" class="btn btn-primary">    Notifications <span class="badge text-bg-light ms-1">4</span></button>

Positioned

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

HTML
<button type="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 class="visually-hidden">unread messages</span>    </span></button>

Background colors

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
HTML
<span class="badge text-bg-primary">Primary</span>

Background soft colors

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Dark
HTML
<span class="badge text-bg-primary-soft">Primary</span>

Pill badges

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

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
HTML
<span class="badge rounded-pill text-bg-primary">Primary</span>
Recent Notification