Pico does not ship Bootstrap-style .badge components. Status chips and counts come from semantic inline elements Pico already styles: small, mark, sup, kbd, and secondary button outlines for pill-like labels.
Patterns that work
smallnext to a heading for muted status (“Beta”, “Updated today”).markfor search highlights or “new” emphasis in prose.supfor footnote numbers or compact counts in nav links.kbdfor keyboard hints in documentation—pairs well with the search/dialog lesson.
Need strict brand-colored pills? Override Pico CSS variables or add a tiny project-specific class—avoid fighting element defaults with long utility chains.
Self-check
- Which element highlights matching text in docs search results?
- Why might
smallbe better than a customspan.badgein Pico projects?