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>
</>
Radius
Badge supports three different radii.
<>
<Badge radius="rounded" className="me-2">
Rounded
</Badge>
<Badge radius="square" className="me-2">
Square
</Badge>
<Badge radius="pill" className="me-2">
Pill
</Badge>
</>
Sizes
The badge can be rendered at four different sizes.
Primary and dark badges will have a solid background at all four sizes, but all others will be solid at "xs" and light with a border for all other sizes.
<>
<Badge size="xs" variant="secondary" className="me-2">
Extra Small
</Badge>
<Badge size="sm" variant="secondary" className="me-2">
Small
</Badge>
<Badge size="md" variant="secondary" className="me-2">
Medium
</Badge>
<Badge size="lg" variant="secondary" className="me-2">
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>
Props