Status Indicator

Guidelines

When to use

• Semantic meaning: To represent a state or attribute with clear semantic meaning, such as error, success, warning, or info.
• Dynamic states: To display dynamic states or statuses that change based on system events or user actions, like a security level or ledger balance.
• Non-blocking feedback: To highlight areas or items that need user attention in a passive, non-disruptive way.

 

When not to use

• Categorization: Don’t use it for static, non-semantic labels or categorization. Use Tags instead.
• Grouping items: Don’t use it to represent multiple items that belong together or represent user selection. Use Chips instead.
• Updates: Don’t use it to indicate something new in the system (e.g., in the Side Menu). Use Badges instead.

 

Best practices

• Use indicators to enhance clarity and emphasize semantic meaning.
• Choose clear, recognizable icons that match their corresponding semantic variants.
• Use concise, descriptive keywords. Keep them short and to the point.
• Avoid overloading screens with too many indicators.
• Use icon-only variants when space is limited, ensuring the meaning is still clear.
• Place the indicator adjacent to the item or attribute it describes.

 

Status Indicators vs. Tags

A Status Indicator conveys the semantic state of an item and is limited to passive interactions (Tooltips or Popovers). Use in tables, dashboards, or cards where status is dynamic and meaningful.

Tags (categorical) are non‑interactive and purely informational, used for static categorization. Typical uses include scenarios that require emphasizing categories, such as:

• Categories matching chart colors.
• Highlighting different types of items in a list or table.
• Representing a single type within a table cell.

 

Status Indicators vs. Chips

Both are compact and wrap text, making them recognizable at a glance, but they differ in purpose and interactivity.

Status Indicators carry semantic meaning and are passive.

Chips represent single items within a selection or collection. They can be interactive (removable) or read-only, and are commonly used in forms or table cells to display grouped values. Examples include:

• Displaying Multiselect field selections.
• Showing grouped properties or categories in a list or table cell.

 

Status Indicators vs. Tags vs. Chips (summary)

 

Properties

Variants

Choose variants carefully based on their semantic meaning:

• Danger: Error status, urgent information, negative feedback.
• Warning: Pending items, statuses that require attention, such as expired documents, or review needed.
• Success: Completed status, successful outcome, confirmation.
• Info: Informational, supportive, educational, helpful feedback.
• Basic: General information, statuses, or states that don’t require immediate attention.
• Primary: General insights, tips, or AI information.

 

Icon shapes

Icon shapes help communicate urgency and the level of attention required. Selecting the appropriate iconography helps to reinforce the message.

• Rounded shapes or no outline: non-urgent, low-attention, neutral, completed or positive states.
• Sharp shapes: higher urgency, warnings, errors, or states requiring attention.

 

Background

• Use background to increase emphasis (e.g., highlight information inside a dashboard card).
• Avoid background for low‑attention feedback to reduce visual noise.

 

How to pair icon shapes and color

• Pair shapes and color consistently so the same status feels the same everywhere.
• Use rounded icon shapes for Info, Success, and low-emphasis Basic statuses; reserve sharp shapes for Warning and Danger.
• Do not rely on icon shape or color alone. Include a short label or tooltip where possible to improve accessibility.
• Keep icon metaphors simple and familiar (e.g., check for success, info for information, exclamation in a triangle for warnings).

 

Icon-only

Use icon-only Status Indicators sparingly. They reduce clarity and can create accessibility issues; therefore, it is preferable to pair an icon with a short label whenever space allows.

• Use it only when space is limited and or in high‑density contexts where meaning remains clear.
• Never rely on color or shape alone. Provide an accessible name (e.g., aria-label) or a concise tooltip to clarify meaning.
• Keep icon metaphors familiar and consistent across the product. If the meaning isn’t instantly clear, use a label.
• Validate with real UI density: if multiple icon-only indicators appear together, prefer labels to avoid ambiguity.

 

---

Behavior

Interactive states

Status Indicators can expose lightweight interactions to reveal more context via Tooltips (hover) or Popovers (click). Use these sparingly and follow best practices for accessibility.

 

Using Tooltips

Tooltips appear on hover to provide additional context about the status.

• They should never contain interactive elements (buttons, links, form fields, etc.).
• Tooltips are strictly for short, contextual explanations of the status.
• Use hover only; do not make tooltips persist beyond pointer interaction.

 

Using Popovers

Popovers can be used when the user needs additional context or details that cannot fit in a tooltip.

• Popovers are triggered on click (or tap) and can contain more information than a tooltip.
• Popovers must remain accessible, with proper focus management and keyboard navigation.
• Only use Popovers if the content requires navigation or extended explanation; avoid using them for simple status descriptions.

 

---

Content

Match terminology used elsewhere in the UI
Status Indicators often repeat key concepts — make sure they match the labels, filters, or statuses used in related components. Make sure you’re not mixing “canceled”, “voided”, “failed”, etc.

Keep them short and scannable
They should be 1–2 words — no more than what fits comfortably in the container.
✅ Paid
✅ No-show
🚫 Payment completed successfully

Use sentence case with no punctuation
✅ Pending payment
🚫 Pending Payment. / Pending Payment!

Avoid using verbs or actions
Status Indicators represent states or attributes — not actions.
✅ Confirmed
🚫 Confirm booking