# 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)