Use tag for compact static category or status labels, filter chips for active removable filters, chip selection for choosing values, and inline message for contextual feedback that needs sentence-level explanation or action.
Use tag for compact static category or status labels, filter chips for active removable filters, chip selection for choosing values, and inline message for contextual feedback that needs sentence-level explanation or action.
Practice the judgment: Imagine this situation: A read-only status tag receives focus and looks removable, so keyboard users try to activate it and nothing happens. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Tag / status tag | Filter chips | Chip selection | Inline message |
|---|---|---|---|---|
| UI or UX | UI + UX - Compact static category or status label attached to an object | UI + UX - Compact chip set for toggling or removing result filters | UI + UX - Compact selectable chip group for short choice answers | UI + UX - Contextual in-flow feedback |
| UI guidance | Render a tag as a short non-interactive label attached to the object, row, card, heading, count, or result it describes, using stable placement and a visual weight lower than the object's title or primary action. | Render filter chips as a compact set of short, consistently styled controls near the content they filter, with clear selected, unselected, focused, disabled, and removable states. | Render a labelled chip group with short chip labels, visible selected and unselected states, focus states, disabled states, optional selected checkmarks, and inline help or error text. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. |
| UX guidance | Keep tag meaning synchronized with the underlying object state and route interactive filtering, selection, removal, or recovery work to chips, controls, inline messages, or alerts instead. | Help the person reach a clear task outcome. | Use chip selection when users answer a lightweight choice question from a small visible set and the labels are short enough to scan as chips. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. |
| Good UI | A claims table shows status tags such as Pending review, Approved, and Needs evidence in the Status column, with semantic colors and the same text used in detail views. | A search results page shows chips for Open, Urgent, Appeals, and Benefits below the search box, with selected chips using a checkmark and stronger background. | An onboarding form asks Choose up to 3 interests and shows compact chips for Design, Data, Research, AI, Accessibility, and Mobile with selected checkmarks. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. |
| Bad UI | Every ticket row has nine colorful tags for team, priority, system, phase, age, owner, source, queue, and channel, making the table harder to scan. | A single pill labelled Filter sits alone and behaves like a vague button. | A chip row contains selectable answers, removable tags, links, and action chips with identical styling. | A section message contains a full support workflow, several links, and unrelated settings controls. |
| Good UX | A user sees an Approved status tag beside a claim title and then opens the detail page where the same status and next-step explanation appear in context. | A user tabs to Status: Open, presses Delete, and focus moves to the next applied chip while the result summary updates. | A user selects Design, Data, and Accessibility, sees 3 of 3 selected, then receives immediate feedback when trying to add a fourth chip. | A successful send message remains beside the invoice long enough to copy the generated reference. |
| Bad UX | A record changes from Pending to Denied but a cached tag still says Pending, so the user starts the wrong follow-up task. | Tapping a chip changes the page route and clears the result context. | A user taps a chip expecting to answer a question, but the page filters content instead. | The message disappears like a toast even though users still need the invoice reference. |
| Best fit | A compact category, state, phase, freshness marker, priority, or count helps users scan a group of objects. | A few common filters should stay visible and directly toggleable near the content. | Users answer a lightweight choice question from a small set of short labels. | A visible object or section has local status, warning, success, or next-step information. |
| Avoid when | Users need to click, remove, select, or edit the label. | There are many criteria, ranges, dates, or grouped fields that need a panel or form. | The chips filter a result set rather than collect an answer. | The message is a one-field validation correction. |
| Required state | Neutral category tag attached to a row, card, heading, or object summary. | Selected chip state with visible selected indicator and updated result count. | Empty chip group with visible question label and helper text. | Informational inline message attached to the relevant object or section. |
| Accessibility burden | Keep read-only tags out of the tab order and avoid hover, active, or focus styling that implies a control. | Use button semantics for interactive chips and expose selected state with aria-pressed or equivalent semantics. | Give the chip group a visible label and programmatic group name. | Keep the message in the reading order near the context it describes. |
| Common misuse | Making a static tag look clickable or focusable. | Using a lone chip as a generic Filter button. | Mixing selectable chips, removable tags, read-only badges, links, and action chips in one visual group. | Using an inline message for a single field error that should be connected to that input. |