Badges

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

Examples

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

Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
aspnet 

<bs-heading heading-level="One">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>
<bs-heading heading-level="Two">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>
<bs-heading heading-level="Three">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>
<bs-heading heading-level="Four">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>
<bs-heading heading-level="Five">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>
<bs-heading heading-level="Six">Example heading <bs-badge bg-color="Secondary" bg-contrasts-text="true">New</bs-badge></bs-heading>

Buttons

Use bs-badge inside links or buttons to provide a counter.

aspnet 

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

Depending on how they are used, badges can be confusing for screen readers and similar assistive technologies. Unless the context is clear, include additional context with visually hidden text.

Inbox badge positioning

Use bs-badge utility attributes to position the badge in the corner of a link or button.

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-span screen-reader-visibility="VisuallyHidden">unread messages</bs-span>
    </bs-badge>
</bs-button>

Profile

You can also use bs-badge with utility attributes and no visible count for a more generic indicator.

aspnet 

<bs-button btn-style="Primary" position="Relative" start-margin="Default4">
    Profile
    <bs-badge
              bg-color="Danger"
              border-color="Light"
              borders="All"
              border-rounding="Circle"
              padding="Default2"
              position="Absolute" offset-placement="TopEnd" translate-middle="Both"
              hide-content="true">
        New alerts
    </bs-badge>
</bs-button>

Background colors

Set a background color with contrasting foreground color using bg-color and bg-contrasts-text on bs-badge.

Primary Secondary Success Danger Warning Info Light Dark
aspnet 

<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
    <bs-badge bg-color="Primary" bg-contrasts-text="true">Primary</bs-badge>
    <bs-badge bg-color="Secondary" bg-contrasts-text="true">Secondary</bs-badge>
    <bs-badge bg-color="Success" bg-contrasts-text="true">Success</bs-badge>
    <bs-badge bg-color="Danger" bg-contrasts-text="true">Danger</bs-badge>
    <bs-badge bg-color="Warning" bg-contrasts-text="true">Warning</bs-badge>
    <bs-badge bg-color="Info" bg-contrasts-text="true">Info</bs-badge>
    <bs-badge bg-color="Light" bg-contrasts-text="true">Light</bs-badge>
    <bs-badge bg-color="Dark" bg-contrasts-text="true">Dark</bs-badge>
</bs-div>

Using color to add meaning only provides a visual indication. Make sure the meaning is obvious from the visible text or included through additional hidden text.

Pill badges

Use border-rounding="Pill" to make badges more rounded with a larger border radius.

Primary Secondary Success Danger Warning Info Light Dark
aspnet 

<bs-div display="Flex" gap="Default2" flex-wrap="Wrap">
    <bs-badge bg-color="Primary" bg-contrasts-text="true" border-rounding="Pill">Primary</bs-badge>
    <bs-badge bg-color="Secondary" bg-contrasts-text="true" border-rounding="Pill">Secondary</bs-badge>
    <bs-badge bg-color="Success" bg-contrasts-text="true" border-rounding="Pill">Success</bs-badge>
    <bs-badge bg-color="Danger" bg-contrasts-text="true" border-rounding="Pill">Danger</bs-badge>
    <bs-badge bg-color="Warning" bg-contrasts-text="true" border-rounding="Pill">Warning</bs-badge>
    <bs-badge bg-color="Info" bg-contrasts-text="true" border-rounding="Pill">Info</bs-badge>
    <bs-badge bg-color="Light" bg-contrasts-text="true" border-rounding="Pill">Light</bs-badge>
    <bs-badge bg-color="Dark" bg-contrasts-text="true" border-rounding="Pill">Dark</bs-badge>
</bs-div>

Accessible names

aspnet 

<bs-button btn-style="Primary">
    Profile
    <bs-badge bg-color="Light" bg-contrasts-text="true" start-margin="Default2">
        9
        <bs-span screen-reader-visibility="VisuallyHidden">unread notifications</bs-span>
    </bs-badge>
</bs-button>

CSS

Variables

Badges use Bootstrap's component-level CSS variables and utility classes for color, spacing, and radius.

Sass variables

Badge Sass variables remain stylesheet concerns; use the helper attributes for common color and rounding cases in Razor.