# Persona - **Category:** Data Display (`data-display`) - **Slug:** `data-display/persona` - **Status:** stable - **Platforms:** web - **Import:** `import { Persona } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/data-display/persona > User identity row: avatar + name + optional secondary line, presence dot, and trailing action. ## When to use it **Persona** is the shared "user cell": one person, an avatar, a name, and an optional supporting line. Reuse it in account switchers, comment headers, member lists, mention menus, and assignee pickers so identity looks the same everywhere. For several people condensed into a stack, use **AvatarGroup**. When the row needs selection, a whole-row link, or leading/trailing controls beyond a single action, graduate to **ListCell** — Persona is deliberately a compact identity display, not an interactive row. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `action` | `ReactNode` | no | — | Trailing slot pinned to the row end — a button, menu trigger, or meta. | | `avatar` | `ReactNode` | no | — | Replaces the built-in avatar with any leading node (custom mark, logo…). | | `avatarProps` | `Omit` | no | — | Props forwarded to the built-in leading `` (e.g. `initials`, `alt`). | | `className` | `string` | no | — | — | | `name` | `ReactNode` | yes | — | Primary line — the person's name or title, rendered in ink. | | `presence` | `enum` | no | — | Presence tone. When set, a ringed `StatusDot` overlays the avatar corner. | | `presenceLabel` | `string` | no | — | Accessible label for the presence dot (e.g. "Online"). | | `secondary` | `ReactNode` | no | — | Optional muted second line — email, role, or handle. | | `size` | `enum` | no | `md` | Overall density: sm 24 / md 32 / lg 40 avatar with matching type. | | `src` | `string` | no | — | Image URL forwarded to the built-in leading ``. | | `style` | `CSSProperties` | no | — | — | ## Examples ### Basics Pass a `name` and (optionally) a `src`. The built-in `Avatar` derives its initials from the name, and a muted `secondary` line carries an email, role, or handle. ```tsx import { Persona } from "@protocore/pds"; export default function PersonaBasics() { return ; } ``` ### Presence Set `presence` to a status tone to overlay a ringed `StatusDot` on the avatar corner. Always pair it with `presenceLabel` so the state isn't color-only. ```tsx import { Persona, Stack } from "@protocore/pds"; export default function PersonaPresence() { return ( ); } ``` ## Usage **Do** - Lead with the `name`; keep `secondary` to one supporting line. - Pair `presence` with a `presenceLabel` so status isn't color-only. - Use the `action` slot for a single trailing control. - Match `size` to the surrounding density (menus `sm`, headers `lg`). **Don't** - Don't stack multiple lines of metadata under the name — use one `secondary`. - Don't make the whole Persona clickable; wrap it or use ListCell instead. - Don't rely on the presence dot's color alone to convey state. - Don't put more than one control in `action`. ## Accessibility **Notes** - The avatar derives its accessible name from `name`; pass `avatarProps.alt` to override. - The presence dot is exposed as an image labelled by `presenceLabel` (falls back to the tone). - Persona imposes no role — place it inside your list/menu semantics as needed. ## Related `avatar`, `avatar-group`, `list-cell`, `status-dot` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/