# Badge

A short label in a pill, coloured by its tone, for a state or a count beside a title.

A badge names a state in a word or two, such as Live, Draft or 3 new. Its tone picks the colour from the theme, so the same word reads the same on every screen. It is a label, not a control; to act on something, use a button.

## Use it

Web:

```rust
use ocean_ui_core::{Badge, Tone};
Badge { text: "Live".into(), tone: Tone::Ok }
```

Native:

```rust
use ocean_ui_native::{Show, core::{Badge, Tone}};
Badge { text: "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 |
|---|---|---|---|
| `text` | `String` | `—` | The words in the pill, short and in sentence case. |
| `tone` | `Tone` | `Neutral` | Neutral, Ok, Warn, Bad, Info or Brand: what the label means. |

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

## Examples

### Tones

A tone gives the badge its meaning; the words carry it too.

```rust
Badge { text: "Live".into(), tone: Tone::Ok }.html(out);
Badge { text: "Trial".into(), tone: Tone::Info }.html(out);
Badge { text: "Due soon".into(), tone: Tone::Warn }.html(out);
Badge { text: "Overdue".into(), tone: Tone::Bad }.html(out);
```

### Neutral and brand

Neutral for counts and tags, brand for the product's own label.

```rust
Badge { text: "12 tags".into(), tone: Tone::Neutral }.html(out);
Badge { text: "New".into(), tone: Tone::Brand }.html(out);
```

### Beside a title

A badge qualifies what it sits next to.

```rust
out.push_str("<b>Acme renewal</b> ");
Badge { text: "Pilot".into(), tone: Tone::Info }.html(out);
```

## Accessibility

- The badge is a span of plain text, so a screen reader reads its words in place.
- The tone is colour only, so the words must carry the meaning on their own.
- It takes no focus and no clicks.

## Related

- [Status](/ui/components/status.md)
- [KPI](/ui/components/kpi.md)
- [Grid](/ui/components/grid.md)