Badge
Small count and labeling components. Badges scale to match the size of their parent via
a relative em font-size, so they sit naturally inside headings and buttons.
Import
import { Badge } from '@metatoy/bootstrap-styled';Variants
Use the variant prop for one of the eight contextual colors. Each renders a solid fill
with a readable contrast text color.
Pill badges
Add pill for the fully rounded rounded-pill shape.
In context
Because the font-size is em-relative, a badge inherits the type size of whatever
contains it. Use as to render the badge as a different element, such as a link.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | — | — |
| pill | boolean | — | Fully rounded (rounded-pill). |
| as | React.ElementType | — | — |
Badge also accepts all native <span> attributes.
Theming
Badge reads --bs-<variant> for its background and --bs-<variant>-contrast for its
text color, so a theme (or scoped) override of the contextual color reshades the badge
automatically. The corner radius comes from --bs-border-radius, or
--bs-border-radius-pill when pill is set.
Accessibility
A badge is a <span> with no inherent semantics, so its color carries no meaning to
assistive tech. When a badge conveys information (e.g. a notification count), include
context in the text — for icon-only or numeric badges, add a visually-hidden label such as
<span className="visually-hidden">unread messages</span>.
Explore in Ladle
The library doesn’t ship a dedicated Badge story yet — browse the component gallery: Open in Ladle.