Badges

Small count and labeling components.

Examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
aspnet 

<h1>Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></h1>

Buttons with badges

aspnet 

<bs-button btn-style="Primary">
  Notifications
  <bs-badge bg-color="Light" bg-contrasts-text="true" start-margin="Default2">4</bs-badge>
</bs-button>

Positioned

aspnet 

<bs-button btn-style="Primary" position="Relative">
  Inbox
  <bs-badge bg-color="Danger" bg-contrasts-text="true" border-rounding="Pill" position="Absolute" offset-placement="TopEnd" translate-middle="Both">99+</bs-badge>
</bs-button>

Background colors

Primary Secondary Success Danger Warning Info Light Dark
aspnet 

<bs-badge bg-color="Primary" bg-contrasts-text="true">Primary</bs-badge>

Pill badges

Primary Secondary Success Danger Warning Info Light Dark
aspnet 

<bs-badge bg-color="Primary" bg-contrasts-text="true" border-rounding="Pill">Primary</bs-badge>