Lily Design System™

StatusTag

A small inline label that names the current state of an item — "Completed", "In review", "Cannot start yet" — typically rendered next to a row in a list, a step in a workflow, or a heading on a detail page.

The component is intentionally a static label, not a live region: it renders a <span> with the status text inside and a tone prop that the consumer maps to colour. Crucially, the meaning is always carried by the visible text — colour is reinforcement, never the only indicator. WCAG 1.4.1 (Use of Colour) requires this for users who can't perceive colour.

StatusTag does not announce changes. If the status updating during the user's session is meaningful (e.g. "Awaiting review" → "Approved"), wrap the tag in a Notification or Alert with aria-live="polite", or use Toast for a transient announcement. Use Badge for counts, Tag for non-status keyword labels.

Example

StatusTag
Show demo markup 
<div class="status-tag" aria-label="a tag showing the current status of a task">StatusTag</div>
Usage example 
<StatusTag label="Completed" tone="success" />
<StatusTag label="Awaiting review" tone="warning" />
Show Svelte source 
// In your Svelte component:
import StatusTag from "lily-design-system-svelte-headless/components/StatusTag/StatusTag.svelte";

<StatusTag>
  <!-- content -->
</StatusTag>

Usage

<StatusTag label="Completed" tone="success" />
<StatusTag label="Awaiting review" tone="warning" />

Props

PropTypeDefaultDescription
labelstring (required)—Status text shown to users
tone"neutral""success""warning""danger""info""neutral"Tone hint used by consumers to drive styling
...restPropsHTML attributes—Spread onto the root <span>

Keyboard Interactions

  • No keyboard interactions — this is a passive label

ARIA

  • role="status" is NOT applied by default — this component is a static label, not a live region
  • Consumers wanting screen reader announcements when status changes should wrap the tag in a Notification or apply aria-live="polite" themselves

When to Use

  • Showing the current state of a task, application, or item in a list or table
  • Annotating rows in a data table or list with their workflow status

When Not to Use

  • Use Badge for counts (number of items, notifications)
  • Use Tag for category labels that aren't specifically about status
  • Use Alert or Notification when status changes need to be announced

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .status-tag as the root class. No default styles are included.

Related components

  • badge — count or category label
  • tag — generic keyword tag
  • flair — decorative emphasis

References

Implementation Notes

  • Renders a <span> with the status text inside
  • The semantics are conveyed by the visible text and (optionally) aria-label — colour alone is never the indicator
  • Accepts a tone prop (e.g. "success", "warning", "danger", "info") which the consumer can use to drive class-based styling
  • Spreads restProps onto the root <span>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: status-tag
  • PascalCase: StatusTag
  • Description: a tag showing the current status of a task
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <span>
  • CSS class: .status-tag
  • Interactive: no

ARIA

  • role="status" is NOT applied by default — this component is a static label, not a live region
  • Consumers wanting screen reader announcements when status changes should wrap the tag in a Notification or apply aria-live="polite" themselves

Keyboard

  • No keyboard interactions — this is a passive label

Props

  • label: string (required) (default: —) — Status text shown to users
  • tone: "neutral" | "success" | "warning" | "danger" | "info" (default: "neutral") — Tone hint used by consumers to drive styling
  • ...restProps: HTML attributes (default: —) — Spread onto the root <span>