/// Data Display
Persona
User identity row: avatar + name + optional secondary line, presence dot, and trailing action.
import { Persona } from "@protocore/pds";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.
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.
Trailing action
The action slot pins to the row end — a follow button, a menu trigger, or meta. size (sm / md / lg) scales the avatar and type together.
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.
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
- 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.
Persona props
| Prop | Type | Default | Description |
|---|---|---|---|
action | ReactNode | — | Trailing slot pinned to the row end — a button, menu trigger, or meta. |
avatar | ReactNode | — | Replaces the built-in avatar with any leading node (custom mark, logo…). |
avatarProps | Omit<AvatarProps, "size"> | — | Props forwarded to the built-in leading `<Avatar>` (e.g. `initials`, `alt`). |
className | string | — | |
name * | ReactNode | — | Primary line — the person's name or title, rendered in ink. |
presence | enum | — | Presence tone. When set, a ringed `StatusDot` overlays the avatar corner. |
presenceLabel | string | — | Accessible label for the presence dot (e.g. "Online"). |
secondary | ReactNode | — | Optional muted second line — email, role, or handle. |
size | enum | md | Overall density: sm 24 / md 32 / lg 40 avatar with matching type. |
src | string | — | Image URL forwarded to the built-in leading `<Avatar>`. |
style | CSSProperties | — |