Badges
Use badges for counts and status labels, including pill styles and contextual colors.
Badge basics
Section titled “Badge basics”Badges are small labels for counts or statuses. Keep them short and readable, and use color to reinforce meaning (not replace it).
Badge example
Section titled “Badge example”Badges are compact labels for counts, status, and short metadata.
Badge: Text
Section titled “Badge: Text”Use Text to change the badge label. Keep it short (for example, a count or a single word status).
Badge: Position
Section titled “Badge: Position”Use Position to place the badge before or after neighboring content.
Badge: Style
Section titled “Badge: Style”Use Style to choose the badge’s variant. Prefer variants with good contrast (Bootstrap’s text-bg-* styles handle text/background contrast for you).
Badge: Pill
Section titled “Badge: Pill”Use Pill for a rounded badge style.
Next steps
Section titled “Next steps”Continue with other Components tours or return to the Components menu.