# Empty

What a place shows before it has anything in it, one sentence and an optional next step.

An empty state says in one sentence why nothing is here and what would fill it. When there is an obvious next step, action names it and both faces draw it as a small outline button. It has no tone, because nothing has gone wrong.

## Use it

Web:

```rust
use ocean_ui_core::Empty;
Empty { sentence: "No tickets match this filter.".into(), action: Some("Clear filter".into()) }
```

Native:

```rust
use ocean_ui_native::{Show, core::Empty};
let action = Some("New environment".into());
let took_it = Empty { sentence: "No environments yet.".into(), action }.show(ui).clicked();
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `sentence` | `String` | `—` | Why nothing is here, and what would fill it. |
| `action` | `Option<String>` | `None` | The label of one next step, a verb in sentence case. |

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

## Examples

### One sentence

An empty state names the noun.

```rust
Empty { sentence: "No tickets yet.".into(), action: None }
```

### With an action

At most one action, the way out of the empty state.

```rust
Empty { sentence: "No agents yet.".into(), action: Some("Build an agent".into()) }
```

### No match

A search with no match offers the way back.

```rust
Empty {
    sentence: "No components match.".into(),
    action: Some("Clear the search".into()),
}
```

## Accessibility

- The sentence is a plain paragraph, read in page order.
- The action is a real button element whose label is its accessible name, so it is reached with Tab.
- Nothing is announced when the empty state appears.

## Related

- [Skeleton](/ui/components/skeleton.md)
- [Alert](/ui/components/alert.md)
- [Button](/ui/components/button.md)