Badge

Small components for counts and labels.

Bootstrap’s badge docs describe the markup and CSS.

Variants

Badges come in solid (default), subtle and outline variants. Add pill for rounded ends.

SolidSubtleOutlinePill

HTML

<div class="d-flex flex-wrap gap-2">
  <span bsBadge theme="primary">Solid</span>
  <span bsBadge theme="primary" variant="subtle">Subtle</span>
  <span bsBadge theme="primary" variant="outline">Outline</span>
  <span bsBadge theme="danger" pill>Pill</span>
</div>

Themes

Every variant works with every theme color.

primaryaccentsuccessdangerwarninginfoinversesecondary

@for (variant of variants; track variant) {
  <div class="d-flex flex-wrap gap-2 mb-2">
    @for (theme of themes; track theme) {
      <span bsBadge [theme]="theme" [variant]="variant">{{ theme }}</span>
    }
  </div>
}

In buttons

Badges scale with their parent, so they fit in buttons and headings.

HTML

<button type="button" bsButton theme="primary">
  Notifications <span bsBadge theme="danger">4</span>
</button>

API

BsBadge

Selector: [bsBadge]

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the badge.
`variant`	`'solid' \| 'subtle' \| 'outline'`	`'solid'`	Visual style.
`pill`	`boolean`	`false`	Gives the badge fully rounded ends.