CngxStatus
projects/common/display/status/status.component.ts
Import#
import { CngxStatus } from '@cngx/common/display'
Description#
Semantic health indicator - a decorative tone dot paired with a visible
label. Distinct from CngxBadge (count overlay), CngxChip (interactive)
and CngxTag (labeled token): its single job is to communicate a status
(operational / degraded / down / info).
Colour is never the only signal (Pillar 2): the tone drives the dot colour
and a tone glyph, so a colour-blind reader still distinguishes the states,
and the visible label carries the meaning for assistive tech (the dot is
aria-hidden). Set live for a status that changes in place.
Basic
<cngx-status tone="success" label="Operational" />Live-updating
<cngx-status tone="danger" label="Outage" live="assertive" />Dot-only (bare coloured dot + label)
<cngx-status tone="success" label="Operational" [glyph]="false" />[glyph]="false" drops the glyph for a GitHub-style coloured dot. Keep a
visible label: without the glyph, colour is the dot's only signal, which a
sighted colour-blind reader cannot resolve (a dev-mode warning enforces this).
Metadata#
Host#
Index#
Inputs#
Show the tone glyph inside the dot. false renders a bare coloured dot
(GitHub-style) - sound only when a visible label carries the meaning,
since colour alone fails a sighted colour-blind reader (Pillar 2).
true, { transform: booleanAttribute }"off" | "polite" | "assertive"Politeness of the live region. off (default) for a static status;
polite / assertive for a status that changes in place.
'off'StatusToneSemantic health. Drives both the dot colour and the tone glyph.
'neutral'HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-status--success] | tone() === 'success' |
[class.cngx-status--warning] | tone() === 'warning' |
[class.cngx-status--danger] | tone() === 'danger' |
[class.cngx-status--info] | tone() === 'info' |
[class.cngx-status--neutral] | tone() === 'neutral' |
[attr.aria-live] | live() |
Default visuals for CngxStatus. The host carries .cngx-status - an
inline-flex pair of a small tone dot (holding the tone glyph) and a label.
Five tone modifiers pin the dot colour; the glyph inside the dot is the
non-colour signal so the state survives a colour-blind reader.
Tone modifiers
--success- operational, success-coded--warning- degraded, warning-coded--danger- down, danger-coded--info- informational--neutral- unknown / idle, muted
Inheritance
--cngx-status-success-color->--cngx-color-success--cngx-status-danger-color->--cngx-color-danger- remaining tone colours are leaf tokens, all swap in dark mode
Dark mode
Three hooks lift every tone colour to the foundation's dark variant:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Index#
Variant / Success
Variant / Warning
Variant / Danger
Variant / Info
Variant / Neutral
Layout
Typography
*0.7emFont-size of the tone glyph inside the dot, relative to the dot.
<color>whiteForeground colour of the tone glyph, over the coloured dot.
Variant / Success
<color>oklch(0.65 0.18 145)Colour of the --success tone dot. Falls back to --cngx-color-success.
See: [[--cngx-color-success]]
Variant / Warning
<color>oklch(0.75 0.15 85)Colour of the --warning tone dot.
Variant / Danger
<color>oklch(0.65 0.22 25)Colour of the --danger tone dot. Falls back to --cngx-color-danger.
See: [[--cngx-color-danger]]
Variant / Info
Variant / Neutral
<color>oklch(0.6 0.02 290)Colour of the --neutral tone dot.