# Avatar

A person's initials in a circle, taken from the first and last words of their name.

An avatar stands for a person where a full name would not fit, such as an owner column or an assignee. It shows up to two uppercase letters, the first of the first and last words, so Ada Lovelace is AL and Plato is P. The initials are worked out from the name; there is no image and no colour to set.

## Use it

Web:

```rust
use ocean_ui_core::Avatar;
Avatar { name: "Ada Lovelace".into() }
```

Native:

```rust
use ocean_ui_native::{Show, core::Avatar};
Avatar { name: "Ada Lovelace".into() }.show(ui);
```

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

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `name` | `String` | `—` | The person's full name; the initials come from it and it is the accessible name. |

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

## Examples

### Initials

The first letters of the first and last names.

```rust
Avatar { name: "Ada Lovelace".into() }.html(out);
Avatar { name: "Grace Brewster Hopper".into() }.html(out);
Avatar { name: "Linus".into() }.html(out);
```

### In a row

Beside a name, the avatar is decoration with a label.

```rust
Avatar { name: "Maya Chen".into() }.html(out);
out.push_str("<span>Maya Chen</span>");
```

### An agent

Agents are colleagues too.

```rust
Avatar { name: "Triage agent".into() }.html(out);
Status { word: "Working".into(), tone: Tone::Ok }.html(out);
```

## Accessibility

- The avatar is role="img" with the full name as its aria-label, so a screen reader says the name, not the letters.
- It takes no focus and no clicks.
- Where people must be told apart at a glance, show the name in words beside it.

## Related

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