Inline overview
Small pieces of context that belong beside text, not above it.
Design thinking
Badges and tags add status or classification to an existing sentence, row or heading. They should remain visually subordinate to that content; making them look like primary buttons confuses information with action.
Size and spacing
1.375rem single line (22px reference). The shared inline recipe combines a 1rem line box, .125rem vertical padding and borders. The resulting 1.375rem is a reference, not a fixed height. Longer labels must be allowed to grow. Use the shared spacing steps to separate adjacent tags.
Interaction and motion
Static labels do not receive hover or focus affordances. A removable tag exposes a named removal action; a selectable tag uses an actual action control rather than a click handler on a decorative badge.
Best practices
- Use short, specific status text. Pair semantic colors with words so status never depends on hue alone.
- Place a badge next to the item it describes. Avoid a separate padded container just to hold a single badge.
- Use Button or Toggle for actions and filters; use Badge or TagBadge for annotation.
- Keep labels readable at enlarged text sizes. Do not shrink the font or clip the row to preserve 22px.