Badge

The Badge component displays small contextual labels, counters, and status indicators. It is built on top of Bootstrap 5 and supports all utility props provided by the Prime primitive.

Import

import { Badge } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Tones

Use Bootstrap background utilities to change the appearance.

Pill

Use the rounded="pill" utility to create pill-shaped badges.

Notification

Badges can be used inside buttons to display counters.

Utility props

All utility props provided by Prime are supported.

API

Prop	Type	Default	Description
as	elementType	"span"	HTML element used for rendering.
children	ReactNode	—	Component content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.