Badges are used to highlight an item's status for quick recognition. They can be used to show unread counts, notifications, and other status indicators. They can also be used as removable tags.
<>
<Badge variant="primary me-2">Primary</Badge>
<Badge variant="secondary me-2">Secondary</Badge>
<Badge variant="success me-2">Success</Badge>
<Badge variant="danger me-2">Danger</Badge>
<Badge variant="warning me-2">Warning</Badge>
<Badge variant="info me-2">Info</Badge>
<Badge variant="light me-2">Light</Badge>
<Badge variant="dark">Dark</Badge>
</>
Variants
Outline
<>
<Badge variant="outline-primary" className="me-2">
Primary
</Badge>
<Badge variant="outline-secondary" className="me-2">
Secondary
</Badge>
<Badge variant="outline-success" className="me-2">
Success
</Badge>
<Badge variant="outline-danger" className="me-2">
Danger
</Badge>
<Badge variant="outline-warning" className="me-2">
Warning
</Badge>
<Badge variant="outline-info" className="me-2">
Info
</Badge>
<Badge variant="outline-light" className="me-2">
Light
</Badge>
<Badge variant="outline-dark">Dark</Badge>
</>
Bold
<>
<Badge variant="bold-primary" className="me-2">
Primary
</Badge>
<Badge variant="bold-secondary" className="me-2">
Secondary
</Badge>
<Badge variant="bold-success" className="me-2">
Success
</Badge>
<Badge variant="bold-danger" className="me-2">
Danger
</Badge>
<Badge variant="bold-warning" className="me-2">
Warning
</Badge>
<Badge variant="bold-info" className="me-2">
Info
</Badge>
<Badge variant="bold-light" className="me-2">
Light
</Badge>
<Badge variant="bold-dark">Dark</Badge>
</>
Custom color
If a custom background color is provided to Badge, it will default to using the bold variant. The text color will be computed automatically based on the provided background color to make sure accessibility requirements for text contrast are met.
<>
<Badge customColor="#000000" className="me-2">
Dark
</Badge>
<Badge customColor="#ffffff">Light</Badge>
</>
Sizes
<>
<Badge size="xxs" className="me-2">
2x Small
</Badge>
<Badge size="xs" className="me-2">
Extra Small
</Badge>
<Badge size="sm" className="me-2">
Small
</Badge>
<Badge size="md" className="me-2">
Medium
</Badge>
<Badge size="lg" className="me-2">
Large
</Badge>
<Badge size="xl" className="me-2">
Extra Large
</Badge>
<Badge size="xxl" className="me-2">
2x Large
</Badge>
</>
As a notification on an element
The xs size should be used when adding notification style badges on elements.
<Button className="position-relative">
Messages
<Badge
className="translate-middle position-absolute top-0 start-100"
size="xs"
variant="danger"
radius="pill"
type="number"
>
15
</Badge>
</Button>
The dot type can be used to apply a generic notification to any element.
<Button className="position-relative">
Messages
<Badge
className="translate-middle position-absolute top-0 start-100"
type="dot"
size="xs"
variant="danger"
>
Unread messages!
</Badge>
</Button>
Removable
Passing an onRemove prop to the Badge will render a delete icon and make it interactive.
<Badge variant="danger" type="dismissible" onRemove={() => console.log('remove')}>
Delete me
</Badge>
As an interactive element
It is possible to create interactive badges. Specifically badges that behave like buttons by passing button to the as prop.
<Badge
as="button"
variant="primary"
onClick={() => console.log('clicked')}
renderSuffix={() => <span className="icon-edit-05" />}
>
Edit me
</Badge>
Icons
Use renderPrefix and renderSuffix to add icons to Badges.
<>
{['xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs'].map((size) => (
<Badge
key={size}
size={size}
className="me-2 mb-2"
renderPrefix={() => <span className="icon-arrow-left" />}
renderSuffix={() => <span className="icon-arrow-right" />}
>
{size} Size
</Badge>
))}
</>
Props