Status
Status indicator web component: an icon and a label coloured by state (ok, warning, error, info, neutral), never colour alone.
- 1.3 KB gzipped
- @lit-material/status 0.0.3
- Renders on the server
Example
Status
An icon and a short label coloured by state. Each state has its own glyph, so it never rests on colour alone.
Markup
<lit-material-status status="ok">Healthy</lit-material-status>
Every state
Install
npm install @lit-material/status @lit-material/tokensimport "@lit-material/status";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-status>
A status indicator: an icon and a short label, coloured by state. Colour is never the only signal — each state has its own glyph and the label says it in words — so it reads in grayscale, for colour-blind users and in forced-colors mode.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
status | status | StatusKind | "neutral" | ok, warning, error, info or neutral (anything else is neutral). |
Slots
| Slot | Description |
|---|---|
| default | The label. |
icon | Replaces the built-in glyph. |
CSS parts
| Part | Description |
|---|---|
status | The row holding icon and label. |
icon | The icon box. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-status-ok-color | |
--lit-material-status-warning-color | |
--lit-material-status-error-color | |
--lit-material-status-info-color | |
--lit-material-status-neutral-color |