Carbon Design System Tag Component
Documents tag variants for labeling, categorization, dismissing, selecting, and operational disclosure, including placement, truncation, clickable areas, read-only non-interactive tags, and limits for heavily wrapped tag groups.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Chip selection | Choose chip selection when the chip set itself is the user's answer to a short choice question. | Selecting a chip changes only that chip group's answer and does not navigate, run an action, remove the option, or filter unrelated content. | Carbon documents selectable tags, selected and unselected states, concise titles, grouping and wrapping limits, keyboard operation, and distinctions from read-only, dismissible, and operational tags. |
| Filter chips | Choose filter chips when there are a few high-frequency filters that can stay visible near the result set without overwhelming scanning. | Selecting a filter chip toggles only that filter and updates the result count or result list without changing unrelated query, sort, pagination, or view state. | Carbon tag guidance documents selectable and dismissible tags for filtering, concise titles, keyboard operation, spacing, and avoiding multi-function tags. |
| Tag / status tag | Choose tag when the label is compact, read-only, attached to a visible object, and useful for scanning or comparison. | A read-only tag does not receive focus, show hover affordance, expose pressed or selected state, or claim click behavior. | Carbon documents read-only, dismissible, selectable, and operational tag variants, clarifying when tag-like elements become controls. |
Comparisons supported by this source
- Chip selection vs filter chips vs checkbox group vs segmented control
Carbon documents selectable tags as selected or deselected choices, keyboard operation with Tab, Enter, and Space, concise tag titles, grouping limits, and differentiation from read-only, dismissible, and operational tags.
- Filter chips vs filter panel vs multi-select
Carbon documents selectable and dismissible tags for filtering data, concise labels, interaction differences, spacing, and keyboard operation.
- Tag vs filter chips vs chip selection vs inline message
Carbon distinguishes read-only, dismissible, selectable, and operational tag variants, supporting the boundary with chips and controls.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Carbon Design System. Last checked: .