CngxStatus
projects/common/data/display/status/status.component.ts
Import#
import { CngxStatus } from '@cngx/common/data'
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" />Metadata#
Host#
Index#
Inputs#
"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.