Badge @ngb-bootstrap/core/badge

A small count or label, built on Bootstrap 6 .badge.

Colors

The eight Bootstrap 6 theme colours, applied with the .theme-* classes.
primaryaccentsecondarysuccessdangerwarninginfoinverse

Variants

solid (default), subtle and outline.
SolidSubtleOutline

Sizes

md (default) and lg.
MediumLarge

Accessibility

A badge is plain text with no role of its own. When it carries meaning beyond its text (for example an unread count next to an icon), add context for screen readers, such as <span class="visually-hidden">unread messages</span>. Colour alone must not convey the meaning.

© 2026 The ngb-bootstrap authors · Apache-2.0