Playground

Experiment with the Badge component by adjusting the props below:

Interactive Playground

Controls

Text

Color Variant

Position

Pill style

Preview

Badge Text

Code

            
            <Badge>
  Badge Text
</Badge>

Basic Example

Base badge

            
            <Badge>Base badge</Badge>

Badge Variants

Bootstrap includes several predefined badge styles with contextual colors.

Primary Secondary Success Danger Warning Info Light Dark

            
            <Badge colorVariant="text-bg-primary">Primary</Badge>
<Badge colorVariant="text-bg-secondary">Secondary</Badge>
<Badge colorVariant="text-bg-success">Success</Badge>
<Badge colorVariant="text-bg-danger">Danger</Badge>
<Badge colorVariant="text-bg-warning">Warning</Badge>
<Badge colorVariant="text-bg-info">Info</Badge>
<Badge colorVariant="text-bg-light">Light</Badge>
<Badge colorVariant="text-bg-dark">Dark</Badge>

Badges with Headings

Badges can be used with any heading (h1-h6) to add supplemental information or status indicators.

Example heading New

            
            <h1>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h1>
<h2>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h2>
<h3>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h3>
<h4>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h4>
<h5>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h5>
<h6>Example heading <Badge colorVariant="text-bg-secondary">New</Badge></h6>

Button with Badge

Badges can be embedded inside buttons to show counts or status indicators alongside button text.

            
            <button type="button" class="btn btn-primary">
    Notifications <Badge colorVariant="text-bg-light">4</Badge>
</button>

Pill Badges

Create badge with more rounded corners using the isPill prop.

Primary Secondary Success Danger Warning Info Light Dark

            
            <Badge isPill={true} colorVariant="text-bg-primary">Primary</Badge>
<Badge isPill={true} colorVariant="text-bg-secondary">Secondary</Badge>
<Badge isPill={true} colorVariant="text-bg-success">Success</Badge>
<Badge isPill={true} colorVariant="text-bg-danger">Danger</Badge>
<Badge isPill={true} colorVariant="text-bg-warning">Warning</Badge>
<Badge isPill={true} colorVariant="text-bg-info">Info</Badge>
<Badge isPill={true} colorVariant="text-bg-light">Light</Badge>
<Badge isPill={true} colorVariant="text-bg-dark">Dark</Badge>

Subtle Badges

Use subtle badges with lighter backgrounds with the subtle variants.

Subtle Subtle Subtle Subtle Subtle Subtle Subtle

            
            <Badge class="text-secondary-emphasis" colorVariant="bg-secondary-subtle">Subtle</Badge>
<Badge class="text-success-emphasis" colorVariant="bg-success-subtle">Subtle</Badge>
<Badge class="text-danger-emphasis" colorVariant="bg-danger-subtle">Subtle</Badge>
<Badge class="text-warning-emphasis" colorVariant="bg-warning-subtle">Subtle</Badge>
<Badge class="text-info-emphasis" colorVariant="bg-info-subtle">Subtle</Badge>
<Badge class="text-light-emphasis" colorVariant="bg-light-subtle">Subtle</Badge>
<Badge class="text-dark-emphasis" colorVariant="bg-dark-subtle">Subtle</Badge>

Positioned Badges

Use the position prop to place badges in the corner of elements.

            
            <!-- Positioned badge on button -->
<button type="button" class="btn btn-primary position-relative">
    Inbox
    <Badge position="top-end" colorVariant="text-bg-danger">99+</Badge>
</button>

<!-- With positioning utilities -->
<button type="button" class="btn btn-primary position-relative">
    Profile
    <Badge
        position="top-end"
        colorVariant="text-bg-danger"
        class="border border-light rounded-circle p-2">
        <span class="visually-hidden">New alerts</span>
    </Badge>
</button>

API Reference

Props

Name	Type	Default	Description
`class`	`string`	`text-bg-primary`	Additional CSS classes to apply to the component.
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`isPill`	`boolean`	`false`	Makes the badge more rounded (pill shaped)
`position`	`string`	—	Used for positioning the badge. Values: 'positioned', 'positioned-top', 'positioned-end', 'positioned-bottom', 'positioned-start'
`colorVariant`	`string`	`'text-bg-primary'`	Sets the badge's background color. Values: 'text-bg-primary', 'text-bg-secondary', 'text-bg-success', 'text-bg-danger', 'text-bg-warning', 'text-bg-info', 'text-bg-light', 'text-bg-dark', or *-subtle variants.

CSS Classes

The component applies Bootstrap's badge classes based on the provided props:

badge - Always applied as the base class
{variant} - Applied based on the variant prop
rounded-pill - Applied when pill is true
position-absolute top-{0|50|100} start-{0|50|100} translate-middle - Applied based on the position prop