Status pill
A run, asset or request condition in one word.
<mm-status-pill state="succeeded"></mm-status-pill>
<mm-status-pill state="running" live></mm-status-pill>
<mm-status-pill status="warning" icon="schedule">Expiring</mm-status-pill>
Guidance
Status pills state the condition of a run, asset or request in a word: a soft status fill, status-coloured text and the word, with an optional leading icon or 6px dot. Colour is never the only signal, and burnt sienna is never a status colour.
Set state for the common Marmot states (succeeded, partial, failed, running, queued, stale,
denied, allowed, cancelled, skipped), which picks the tone, glyph and default word for
you. partial is a run that finished with some failures: ochre (warning) with a part-filled ring,
kept apart from burnt sienna and the failed crimson. Set status directly for anything else and slot your own word.
Don't badge the happy path. Show a pill only when something needs attention (Denied, Failed,
Partial, Stale, Expiring, Running). "Allowed", "Succeeded", "Active" and similar are the default
and get no pill in rows, lists and tables: leave the cell empty, or give screen readers the word
as visually hidden text. isHappyPath(state) and HAPPY_PATH_STATES from this module tell you
which states to skip. A pill for a happy state is fine where the state is the subject, such as a
run's own page header.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
status | status | StatusTone | 'neutral' | Tone: success (moss), warning (ochre text), info (slate), danger (crimson) or neutral. Ignored when state is set. |
state | state | StatusState | '' | '' | Semantic state. Picks the tone, glyph and default word; overrides status. |
icon | icon | string | '' | Leading Material Symbols icon. Overrides the state's default glyph. |
dot | dot | boolean | false | Show a 6px dot instead of an icon. |
live | live | boolean | false | Pulse the dot because the thing is running right now. Only honoured when state="running"; on any other state live is ignored, because a pulse that carries no meaning is noise. The pulse stops under reduced motion. |
Slots
| Slot | Description |
|---|---|
| Default | The word. Defaults to the word for state. |
CSS parts
| Part | Description |
|---|---|
pill | The pill. |
icon | The leading icon. |
dot | The leading dot. |
label | The word. |
Examples
Every state of mm-status-pill in Storybook, with keyboard and screen reader tests.