Cloaked Design SystemStatus

StatusIndicator

A quiet inline status: a tone-colored dot beside neutral label text, shared across card and list surfaces.

Implementation preview

COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

4 stories

Playground selectedOpen canvas

Example source

packages/design-system/src/components/status/StatusIndicator/StatusIndicator.stories.tsxExport Playground

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Stories + source JSON ↗

Local specification source status: preview. Implementation preview pending sign-off.

A quiet inline status: a tone-colored dot beside neutral label text, shared across card and list surfaces.

Design-owned component contract ↗Version 0.2.0-preview.1 · Implementation preview pending sign-off

Implementation API 1 entry point · source-derived preview

Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.

import { StatusIndicator } from '@cloakedinc/design-system';

StatusIndicatorStatusIndicatorProps

packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx:25

Prop	Type	Presence	Notes
`children`	`React.ReactNode`	Required
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger" \| undefined`	Optional	Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`.Source default: `'neutral'`
`className`	`string \| undefined`	Optional
`testId`	`string \| undefined`	Optional	Optional test selector.

Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.

Complete contract · JSON ↗Guidance and source · Markdown ↗

Overview

A tone-colored dot beside plain label text — the quietest, in-context way to show a status inside a card or list row. tone sets the dot color. Reach for Tag when you want a filled standalone pill (emphasis, a count) or the Figma active/inactive treatment.

Use when

tone maps to the --pui-status-* vocabulary. StatusIndicator has no current consumers in the app — it is the shared primitive that card and list-row statuses are meant to compose, so a status reads identically everywhere.

Usage by variant

Choice	Use when	Avoid when
`Tone: neutral`	The default — a quiet, uncolored dot for an inactive or unremarkable state (queued, idle).
`Tone: info`	An in-progress or informational state.
`Tone: success`	A good or complete state — protected, done.
`Tone: warning`	A state that needs attention but is not a failure.
`Tone: danger`	A failed or at-risk state.

Component specification

$schema

../../../specs/component-spec.schema.json

Parts

Id: root
Label: Root
Description: Pill that seats the dot and label with a rounded surface.
Required: true

Id: dot
Label: Dot
Description: Tone-colored status dot.

Id: label
Label: Label
Description: Neutral status text.

Allowed Design Choices

Variants

Indicator

Label: Indicator
Description: The single dot-plus-label treatment.

Sizes

Tones

Neutral

Label: Neutral

Info

Label: Info

Success

Label: Success

Warning

Label: Warning

Danger

Label: Danger

Variants

Id: indicator
Label: Indicator
Description: Dot beside a neutral label.
Platforms: ios
android
web

Sizes

None specified

Measurements

Id: min-height
Label: Minimum height
Kind: exact
Token: --cds-size-32
Value: 32
Unit: px
Applies To: root

Id: content-gap
Label: Dot and label gap
Kind: exact
Token: --cds-space-4
Value: 4
Unit: px
Applies To: root
dot
label

Id: corner-radius
Label: Corner radius
Kind: exact
Token: --cds-radius-xl
Value: 24
Unit: px
Applies To: root

Layout

Alignment: Dot and label center vertically inside the pill.
Flow: A single inline pill with a leading dot and trailing label.
Notes: Use Tag when you need a filled pill that stands on its own with a count or emphasis.

Typography And Color

Typography

Label: Label
Description: Uses the link ramp for compact status text.
Token: --cds-type-link-size

Colors

Label: Surface
Description: The pill sits on the page background.
Token: --cds-bg-page

Label: Label
Description: Neutral primary text for the label.
Token: --cds-text-primary

Label: Dot
Description: The dot uses the tone solid color.
Token: --cds-status-success-solid

States

Id: neutral
Label: Neutral
Description: Neutral tone dot.

Id: info
Label: Info
Description: Info tone dot.

Id: success
Label: Success
Description: Success tone dot.

Id: warning
Label: Warning
Description: Warning tone dot.

Id: danger
Label: Danger
Description: Danger tone dot.

Behavior

Label: Tone
Description: Set tone to color only the dot; the label stays neutral for legibility.

Label: Shared surface
Description: Reuse it in cards and list rows so a status reads identically everywhere.

Accessibility

Label: Visible meaning
Description: The label text carries the status; the dot is a supporting visual.

Label: Contrast
Description: Neutral label text keeps contrast independent of the tone color.

Content Adaptation

Label: Concise label
Description: Use a short status word; the pill does not wrap.

Label: Alignment
Description: The dot stays aligned to the label as surrounding content shifts.

Motion Haptics

Motion

Label: Static
Description: Changing tone recolors the dot without animation.

Haptics

Label: No feedback
Description: StatusIndicator is non-interactive and requests no haptics.

Platform Differences

None specified

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1