StatusIndicator — Aurora AppKit Handover

Summary

A StatusIndicator communicates the current state of a system item, process or resource using a small colour-coded icon. It gives an immediate visual cue without requiring the user to read detailed text. It exposes one property — status — with five semantic values, each mapped to a distinct colour (or, for locked, a lock icon).

Anatomy

The component is a 16×16 frame. Within it sits a small dot composed of a coloured core and a semi-transparent border ring. The locked value swaps the dot for a lock icon.

1
Container — 16×16 frame, aligned top-right.
2
Dot — 8×8, radius border-radius-full (9999).
3
Core — 4×4 inner coloured dot.
4
Border ring — 8×8, opacity 40%, 0.5px weight.
5
Lock icon — shown only for locked (icon size S), replaces the dot.

Properties / API

Property	Type / values	Default	Description
`status`	`success` · `warning` · `critical` · `neutral` · `locked`	`success`	Semantic state. Controls the dot colour (or lock icon) and the border-ring colour.

📝This is the only property — there is no size, style-variant or boolean prop.

Status values

success / warning / critical render a coloured core + border ring (with a soft outer glow); neutral renders only the dot; locked renders a lock icon.

Status	When to use	Dot fill	Glow	Border ring
success	Item is healthy / OK	green-400 #37C871	0/0/6 #37C871	border-success #37C871
warning	Needs attention	bg-warning #FAC900	0/0/6 #D1A900	border-warning #FAC900
critical	Error / failure	bg-critical #E02F1F	0/0/6 #E02F1F	border-critical #F29086
neutral	Inactive / no status	text-disabled #B2B2B3	—	—
locked	Locked / restricted	Renders the `Lock - Locked` icon (size S) — no fill / glow / ring.

States

None. The component is purely presentational — no hover / pressed / focus / disabled states. “State” is expressed entirely through the status value.

Sizes

Fixed: container 16×16, dot 8×8, core 4×4. The locked icon uses icon size S. There is no multi-size system.

Breakpoints

Not applicable — no responsive / breakpoint behaviour. The indicator is a fixed 16×16 across all viewports.

Design tokens

Token	Value
green-400	#37C871
border-success	#37C871
bg-warning	#FAC900
yellow-400	#D1A900 (glow)
border-warning	#FAC900
bg-critical	#E02F1F
red-600	#E02F1F (glow)
border-critical	#F29086
text-disabled	#B2B2B3 (neutral)
border-radius-full	9999

📝The glow uses the base hue token (green-400/yellow-400/red-600) while warning/critical dot fills use the bg-* semantic token. Border rings use border-* tokens at 40% opacity, 0.5px weight.

Accessibility

⚠️No dedicated accessibility section on the Figma page — guidance below is derived and flagged for follow-up.

Colour alone conveys status — always pair the indicator with a text label or accessible name.
Provide a per-status accessible string for screen readers (e.g. “Status: critical”).

Usage

✓ Do

Show the health/condition of items in a list or table.
Use when users scan many items for status changes.
Use to supplement a text label with a quick visual cue.

✕ Don't

Don’t use when the user needs detailed context.
Don’t use it to replace a comprehensive status message.
Don’t rely on colour alone to carry meaning.

Implementation status

No native implementation exists yet — this is a fresh build on every platform.

Android iOS macOS Windows

Changelog

v1.016.6.2026
- Initial release.

Ticket scaffold

Title: StatusIndicator v1.0 — build component [PLATFORM]

Acceptance criteria

16×16 container with an 8×8 dot (4×4 core + 0.5px ring @40%).
status property: success / warning / critical / neutral / locked.
Each status binds the correct fill, glow and ring tokens; locked shows the lock icon.
All colours bound to tokens; light + dark mode verified.
Exposes an accessible status string for screen readers.
Visual diff against the Figma Specification frame.

Jira ticket template

Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate one per platform.

Jira · duplicate per platform

h2. [PLATFORM] · StatusIndicator v1.0 — build component

*Project / Epic*  : [EPIC-KEY]  Aurora AppKit · Supernova
*Issue type*      : Story
*Components*      : StatusIndicator · [PLATFORM]
*Labels*          : aurora-appkit, supernova, design-system, status-indicator
*Priority*        : [Medium]
*Story points*    : [estimate]
*Fix version*     : StatusIndicator v1.0
*Sprint*          : [sprint]
*Assignee*        : [assignee]

h3. Background
New presentational component for the Supernova set: a small colour-coded dot that signals the state of an item/process/resource at a glance, meant to supplement a text label. No code exists on any platform yet.

h3. Objective
Build StatusIndicator v1.0 on [PLATFORM]: a 16x16 indicator with a single {{status}} property and five semantic values.

h3. Design source
* Figma — "Aurora AppKit · Components" -> StatusIndicator page (Specification, Changelog frames)
* Handover spec — supernova-handover/statusindicator.html
* [paste the platform-specific Figma frame link]

h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* Property {{status}} : {{success}} (default) | {{warning}} | {{critical}} | {{neutral}} | {{locked}}
* Anatomy : 16x16 container · 8x8 dot (4x4 coloured core + 0.5 ring at 40% opacity) · lock icon replaces the dot for {{locked}}
* Per-status tokens :
*# success  -> fill {{green-400}} #37C871 · ring {{border-success}} · glow 0/0/6 #37C871
*# warning  -> fill {{bg-warning}} #FAC900 · ring {{border-warning}} · glow 0/0/6 {{yellow-400}}
*# critical -> fill {{bg-critical}} #E02F1F · ring {{border-critical}} #F29086 · glow 0/0/6 {{red-600}}
*# neutral  -> fill {{text-disabled}} #B2B2B3 · no ring / glow
*# locked   -> "Lock - Locked" icon (size S) · no fill / ring / glow
* Radius {{border-radius-full}}. No size scale, no breakpoints (fixed 16x16). No interactive states.

h3. Scope
In scope : the indicator + five statuses on [PLATFORM], all colours bound to tokens.
Out of scope : size variants, interactivity, other platforms.

h3. Dependencies
* Icon component / "Lock - Locked" asset on [PLATFORM]

h3. Acceptance criteria
# Renders at 16x16 with an 8x8 dot (4x4 core + 0.5 ring at 40%).
# {{status}} switches fill, ring and glow per the table; {{neutral}} shows dot only; {{locked}} shows the lock icon.
# All colours are bound to tokens (light and dark verified).
# Exposes an accessible status string for screen readers (e.g. "Status: critical"); never relies on colour alone.

h3. Definition of Done
* Matches the Figma Specification (visual diff), light and dark
* No hard-coded colours — Aurora tokens only
* Unit / snapshot tests for all five statuses
* Reviewed and merged; version v1.0; changelog updated
* Accessible name verified with the [PLATFORM] screen reader

h3. QA / test notes
* Verify each status visually against Figma
* Confirm the dot is always paired with a text label in usage