Status

Tones

An 8 px dot and a word; the word says it without the colour.

Status { word: "Running".into(), tone: Tone::Ok }.html(out);
Status { word: "Waiting".into(), tone: Tone::Warn }.html(out);
Status { word: "Failed".into(), tone: Tone::Bad }.html(out);

Quiet

Neutral and info for states that ask nothing of the reader.

Status { word: "Draft".into(), tone: Tone::Neutral }.html(out);
Status { word: "Queued".into(), tone: Tone::Info }.html(out);

With a badge

Status says how it is; a badge says what it is.

Badge { text: "Agent".into(), tone: Tone::Brand }.html(out);
Status { word: "Needs a person".into(), tone: Tone::Warn }.html(out);

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::{Status, Tone};
Status { word: "Running".into(), tone: Tone::Ok }

use ocean_ui_native::{Show, core::{Status, Tone}};
Status { word: "Deployed".into(), tone: Tone::Ok }.show(ui);

Cargo feature base of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

In App UI, the grid block draws it from YAML.

Props

Accessibility

• The dot is aria-hidden; the word is the text a screen reader reads.
• Colour never carries the state alone, so the word must name it.
• It takes no focus and no clicks.

Related

• Badge
• Grid
• Live table

Markdown

The same page as Markdown, for an agent or a pull request.

# Status

An 8 px dot in a tone and the word it stands for, for the state of a service, a run or a row.

Status pairs a small round dot with one word, such as Running, Paused or Failed. The dot takes its colour from the tone and the word says the same thing in text. Use it in tables and lists, where a badge would be too loud.

## Use it

Web:

```rust
use ocean_ui_core::{Status, Tone};
Status { word: "Running".into(), tone: Tone::Ok }
```

Native:

```rust
use ocean_ui_native::{Show, core::{Status, Tone}};
Status { word: "Deployed".into(), tone: Tone::Ok }.show(ui);
```

Cargo feature `base`; since 2026-10-29.
In App UI the `grid` block draws it ([grid](/ui/blocks/grid.md)).

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `word` | `String` | `—` | The state in one word, in sentence case. |
| `tone` | `Tone` | `Neutral` | Neutral, Ok, Warn, Bad, Info or Brand: the colour of the dot. |

On the Mac: ![Status, dark](/ui/native/status-dark.png) ![Status, light](/ui/native/status-light.png)

## Examples

### Tones

An 8 px dot and a word; the word says it without the colour.

```rust
Status { word: "Running".into(), tone: Tone::Ok }.html(out);
Status { word: "Waiting".into(), tone: Tone::Warn }.html(out);
Status { word: "Failed".into(), tone: Tone::Bad }.html(out);
```

### Quiet

Neutral and info for states that ask nothing of the reader.

```rust
Status { word: "Draft".into(), tone: Tone::Neutral }.html(out);
Status { word: "Queued".into(), tone: Tone::Info }.html(out);
```

### With a badge

Status says how it is; a badge says what it is.

```rust
Badge { text: "Agent".into(), tone: Tone::Brand }.html(out);
Status { word: "Needs a person".into(), tone: Tone::Warn }.html(out);
```

## Accessibility

- The dot is aria-hidden; the word is the text a screen reader reads.
- Colour never carries the state alone, so the word must name it.
- It takes no focus and no clicks.

## Related

- [Badge](/ui/components/badge.md)
- [Grid](/ui/components/grid.md)
- [Live table](/ui/components/live-table.md)