UX Patterns Guide
UI + UX Data Display And Exploration established

Tag / status tag

Attach concise static tags to the object they describe, reserve semantic status tags for current state or priority, keep labels consistent and non-interactive unless another chip or control pattern owns the behavior, and provide fuller explanation elsewhere when the tag alone is not enough.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • A compact category, state, phase, freshness marker, priority, or count helps users scan a group of objects.
  • The label is short, stable enough to display inline, and does not require immediate action.
  • The tag can stay visually and programmatically attached to the object it describes.
  • The product has consistent vocabulary and color semantics for the status values.

Avoid when

  • Users need to click, remove, select, or edit the label.
  • The content needs a sentence, reason, next step, or recovery action.
  • The label is the object's title, primary category heading, or navigation target.
  • The tag count is so high that users would scan columns, filters, or details more effectively.
  • The state changes frequently enough that a compact label would become stale or noisy.

Problem it prevents

Dense lists, cards, dashboards, and task queues often need small pieces of categorical or status metadata, but full messages, columns, icons, and buttons can overwhelm the layout or imply actions users cannot take.

Pattern anatomy

What a strong implementation has to make clear

User need

Objects have a small number of categories, states, phases, freshness markers, priorities, counts, or progress labels users need while scanning.

Pattern promise

Attach concise static tags to the object they describe, reserve semantic status tags for current state or priority, keep labels consistent and non-interactive unless another chip or control pattern owns the behavior, and provide fuller explanation elsewhere when the tag alone is not enough.

Required state

Neutral category tag attached to a row, card, heading, or object summary.

Recovery path

Users try to click static tags because they look like buttons.

Access contract

Do not rely on color, icon, or shape alone to express semantic status.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • 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 document card shows neutral category tags for Form, Medical record, and Uploaded by you after the title and before secondary metadata.
  • A reviewer sorts a queue by due date, then uses Needs evidence tags to triage records that require outreach without opening each record first.
  • 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.
Weak implementation

Vague, hidden, hard to recover from

  • A tag labelled Click to approve looks like a small button but is not keyboard focusable or actionable.
  • 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 user tries to remove a category tag because it looks like an active filter chip, but the page gives no response.
  • A record changes from Pending to Denied but a cached tag still says Pending, so the user starts the wrong follow-up task.
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.
  • Use neutral styling for category tags and semantic styling for status tags only when the text and color both express a consistent current state, progress, urgency, or outcome.
UX guidance
  • Use tag when a compact label helps users scan, compare, prioritize, or understand an object's state without opening a message, filter control, or detail panel.
  • 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.
Implementation contract

What the implementation must handle

States

  • Neutral category tag attached to a row, card, heading, or object summary.
  • Status tag with success, information, warning, and error meanings expressed by text plus visual treatment.
  • No-tag state where the absence of a tag has a clear implied meaning or is replaced by plain metadata.
  • Multiple-tag state with a controlled maximum and wrapping behavior that does not hide title, owner, or actions.

Interaction

  • A read-only tag does not receive focus, show hover affordance, expose pressed or selected state, or claim click behavior.
  • The tag's accessible text matches the visible label and includes status context when color or iconography adds semantic meaning.
  • The surrounding object makes clear what the tag applies to, such as the current row, card, heading, task, file, claim, or notification.
  • Tag updates are driven by canonical object state, not by local decoration copied from stale text.

Accessibility

  • Do not rely on color, icon, or shape alone to express semantic status.
  • Keep read-only tags out of the tab order and avoid hover, active, or focus styling that implies a control.
  • Ensure the tag's object relationship is clear in reading order, table headers, card headings, or labelled groups.
  • Use concise meaningful text that remains understandable when read without the surrounding visual color.

Review

  • What exact object property does this tag expose, and who owns its truth?
  • Is the tag neutral metadata or semantic status, and are color meanings consistent?
  • Can users understand the tag without clicking it or relying on color alone?
  • Would a filter chip, selectable chip, table column, inline message, alert, or heading be more accurate?
Interactive lab

Inspect the states before you copy the pattern

Scan object status and category labels

Inspect static category tags, semantic status tags, stale-status review, active-status update, tag-count limits, and button-like, color-only, filter-chip, title-tag, message-replacement, and tag-cloud failures.

Tag / status tag
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Neutral category tag attached to a row, card, heading, or object summary.

Keyboard / Access

Read-only tags are skipped by Tab because they are text, not controls.

Avoid Generating

Making a static tag look clickable or focusable.
Evidence trail

Source-backed claims behind this guidance

U.S. Web Design System Tag Component

U.S. Web Design System - checked

USWDS documents tags for categorized, new, filtered, and unread-count content with guidance against confusing static tags with controls.

GOV.UK Design System Tag Component

GOV.UK Design System - checked

GOV.UK documents tags as non-interactive status indicators with adjective labels and task-list status examples.

Carbon Design System Tag Component

Carbon Design System - checked

Carbon documents read-only, dismissible, selectable, and operational tag variants, clarifying when tag-like elements become controls.

Full agent/debug reference

Problem Context

  • Objects have a small number of categories, states, phases, freshness markers, priorities, counts, or progress labels users need while scanning.
  • The label can be expressed in one to three words or a short date without becoming the object's title or full explanation.
  • Users need to compare many objects quickly, such as rows in a table, cards in a queue, files in a list, dashboard widgets, or task-list entries.
  • Some labels are neutral categories while others are semantic statuses with success, information, warning, or error meaning.
  • The system can keep status text, color, sorting, filtering, and detailed object state consistent as records change.

Selection Rules

  • Choose tag when the label is compact, read-only, attached to a visible object, and useful for scanning or comparison.
  • Use status tag when the label reports the object's current state, condition, progress, urgency, or outcome.
  • Use neutral category tags when the label groups objects by type, topic, source, ownership, or freshness without status meaning.
  • Use filter chips when the tag represents an active query condition that users can remove or clear.
  • Use chip selection when tags are selectable values in an input or preference flow.
  • Use inline message when users need explanatory copy, a local action, a warning reason, or recovery guidance near the object.
  • Use alert or notification banner when a page-level or task-level condition needs broader context than a compact object label.
  • Use a table column, metadata line, or details panel when many tags would crowd every object.
  • Do not use tags as links, buttons, toggles, menu triggers, or replacement headings.
  • Do not use color-only status; the text and context must still communicate the state.

Required States

  • Neutral category tag attached to a row, card, heading, or object summary.
  • Status tag with success, information, warning, and error meanings expressed by text plus visual treatment.
  • No-tag state where the absence of a tag has a clear implied meaning or is replaced by plain metadata.
  • Multiple-tag state with a controlled maximum and wrapping behavior that does not hide title, owner, or actions.
  • Dynamic status-update state where the visible tag text changes with the object and non-urgent updates are announced appropriately.
  • Overflow or long-label state where copy is shortened, moved to metadata, or explained elsewhere rather than wrapping into a tall badge.
  • Misuse state where clickable, removable, filter, or message behavior is routed to another pattern.

Interaction Contract

  • A read-only tag does not receive focus, show hover affordance, expose pressed or selected state, or claim click behavior.
  • The tag's accessible text matches the visible label and includes status context when color or iconography adds semantic meaning.
  • The surrounding object makes clear what the tag applies to, such as the current row, card, heading, task, file, claim, or notification.
  • Tag updates are driven by canonical object state, not by local decoration copied from stale text.
  • If users can remove, select, filter by, or open details from the label, implement the appropriate chip, button, menu, link, or disclosure pattern instead.
  • Semantic tag colors use the same meaning across product areas and do not conflict with alerts, warnings, or destructive actions.
  • Tags remain secondary to the object title and primary action so scanning helps decision-making without stealing task focus.

Implementation Checklist

  • Define the object property, status lifecycle, allowed values, owner system, and update timing before adding a tag.
  • Limit labels to one to three words where possible and standardize vocabulary for equivalent states.
  • Choose neutral category styling or semantic status styling from meaning, not decorative variety.
  • Place tags consistently near the object identity or in a dedicated status column, not randomly across cards or rows.
  • Set a maximum visible tag count and an overflow rule before rendering user-generated or imported metadata.
  • Check contrast, zoom, text resizing, long translated labels, sentence case, screen-reader text, and mobile wrapping.
  • Verify that tag values match filter facets, detail pages, notifications, sorting, exports, and backend state.
  • Usability-test layouts where tags appear near buttons so users do not confuse labels with controls.

Common Generated-UI Mistakes

  • Making a static tag look clickable or focusable.
  • Using tag as the primary title of an object.
  • Using vague labels such as New, Hot, or Priority without explaining what they mean in the object's context.
  • Mixing neutral category tags and semantic status tags with the same colors.
  • Showing many metadata tags when a table column, details panel, or filter would be easier to scan.
  • Letting cached status tags drift from the object's current workflow state.
  • Using a tag where users need an inline message, alert, validation error, or recovery action.

Critique Questions

  • What exact object property does this tag expose, and who owns its truth?
  • Is the tag neutral metadata or semantic status, and are color meanings consistent?
  • Can users understand the tag without clicking it or relying on color alone?
  • Would a filter chip, selectable chip, table column, inline message, alert, or heading be more accurate?
  • How many tags can appear before the object becomes harder to scan?
  • What happens when the status changes, becomes stale, or differs from the detail page?
Accessibility
  • Do not rely on color, icon, or shape alone to express semantic status.
  • Keep read-only tags out of the tab order and avoid hover, active, or focus styling that implies a control.
  • Ensure the tag's object relationship is clear in reading order, table headers, card headings, or labelled groups.
  • Use concise meaningful text that remains understandable when read without the surrounding visual color.
  • Announce dynamic status changes with a polite live region when the change affects the current task, and reserve assertive announcements for urgent conditions handled by alert patterns.
  • Test contrast between text, tag background, and page background, plus zoom, translated labels, and mobile wrapping.
Keyboard Behavior
  • Read-only tags are skipped by Tab because they are text, not controls.
  • Keyboard order moves from the object title or row content to real actions without stopping on static tags.
  • If a tag-like element can be removed, selected, opened, or filtered by keyboard, it is no longer a read-only tag and must use the relevant control semantics.
  • Dynamic tag changes do not move focus; they update nearby status text or a live region when task-relevant.
  • A tag inside a table cell remains associated with the row and column headers so keyboard and screen-reader users know which object and property changed.
Variants
  • Neutral category tag
  • Status tag
  • Success status tag
  • Warning status tag
  • Error status tag
  • Informational status tag
  • Freshness tag
  • Unread count tag
  • Metadata tag
  • Object lozenge

Verification

Last verified: