# Avatar

> Initials on the brand gradient or a neutral disc, in three sizes.

Category: Data display. Docs page: https://rime.mjsons.net/components/avatar

## Installation

```bash
npx shadcn@latest add KezLahd/rime/avatar
```

Avatar shows initials, from name or given, on the brand gradient (the signed-in person) or a neutral disc (a record).

## Usage

```tsx
import { Avatar } from "@/components/ui";

<Avatar name="Jane Cooper" />
```

## Props: Avatar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Full name; initials are derived (titles like "Dr" are skipped). |
| `initials` | `string` |  | Explicit initials, e.g. a customer's "R.T." (dots are dropped). |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `tone` | `"brand" \| "neutral"` | `"brand"` | brand = the gradient (the signed-in user). neutral = a record (a customer). |
| `label` | `string` |  | Decorative when a name sits next to it (the default). |
| `className` | `string` |  |  |

## Examples

### Sizes and tones

```tsx
<Avatar name="Jane Cooper" size="sm" />
<Avatar name="Wade Warren" />
<Avatar name="Esther Howard" size="lg" tone="neutral" />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-circle` | `50%` |

System tokens it reads: `--brand-deep`, `--brand-fill`, `--brand-gradient`, `--brand-line`, `--ink-inverse`, `--rgb-brand`, `--shadow-specular-dark`.

## Accessibility

- Decorative by default; pass label when it is the only name on screen.

## Do

- Pair it with the person's name in text.

## Don't

- Don't use it as a button on its own.