Yugen UI

Persona

Persona pairs an Avatar (or just a presence dot) with a name and up to three lines of details about a person.

Use it in people lists, profile cards and search results. The Avatar size and font size follow size; textPosition and textAlignment adjust the layout.
Alex ChenDesign leadKyoto · 9:30 AM

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Persona } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Maria Garciaextra-small
Maria Garciasmall
Maria Garciamedium
Maria Garcialarge
Maria Garciaextra-large
Maria Garciahuge

Size

extra-small → huge; Avatar 20 → 64px.

Sam Leeafter
Sam Leebefore
Sam Leebelow

Text position

after (default), before, below.

Priya PatelProduct managerIn a meetingFree at 3:00 PM
Priya PatelProduct manager

Text alignment & four lines

textAlignment start (default) aligns the text with the top edge of the Avatar; center centers it vertically.

Jordan KimAvailable
Taylor NguyenAway
Chris NovakOffline

Presence only

presenceOnly replaces the Avatar with a presence dot, which suits dense lists.

Alex ChenDesign lead
Maria GarciaPhoto failed to load
Release botRuns every night

Image

avatar.src for a photo; an image that fails to load falls back to the initials; shape square for apps and bots.

Alex Chen, Maria Garcia and 3 othersDesign review · 4 files
Release crew3 members
Platform team4 members

Several people

avatars shows an AvatarGroup at the Persona's size: stack (default) or pie. Past maxAvatars (default 3) the rest go into a “+N” button; primaryText names the group.

Usage

Do
  • Keep secondary lines short: job title, status, local time.
  • Pick size by density: small/medium for lists, huge for profile pages.
  • When presence matters, always show it as text too.
Don't
  • Don't use more than four lines of text.
  • Don't use presenceOnly when people need the photo to recognize someone.
  • Don't give names the brand color.

Props

Prop · TypeDefaultDescription
namestringDefault: —Name: the default primaryText and the Avatar's name.
primaryText / secondaryText / tertiaryText / quaternaryTextReactNodeDefault: —Four lines of text; the first is semibold, the others are caption in foreground-2.
size"extra-small" | "small" | "medium" | "large" | "extra-large" | "huge"Default: "medium"Avatar 20 / 24 / 32 / 40 / 48 / 64px.
presence"available" | "busy" | "away" | "offline"Default: —Presence shown on the Avatar.
presenceOnlybooleanDefault: falseShows only the presence dot.
avatar{ src, image, renderImage, color, shape… }Default: —Options passed to the Avatar.
avatars{ name, src?, color?, image?, renderImage? }[]Default: —Several people, shown as an AvatarGroup at the Persona's size. Not combined with avatar, presence or presenceOnly.
avatarLayout"stack" | "pie"Default: "stack"AvatarGroup layout for avatars.
maxAvatarsnumberDefault: 3Most cells for avatars, the “+N” button included; not used by pie.
textPosition"after" | "before" | "below"Default: "after"Position of the text block relative to the Avatar.
textAlignment"start" | "center"Default: "start"Alignment of the text block.