All components
Persona
Avatar with name, secondary label, and a presence badge or ring, from 2xs to 2xl.
SJ
Sara JansenProduct Manager
Variants
SJ
badgeSara JansenProduct Manager
SJ
ringSara JansenProduct Manager
Sizes
SJ
2xsSara JansenProduct Manager
SJ
xsSara JansenProduct Manager
SJ
smSara JansenProduct Manager
SJ
mdSara JansenProduct Manager
SJ
lgSara JansenProduct Manager
SJ
xlSara JansenProduct Manager
SJ
2xlSara JansenProduct Manager
Install
zsh — persona
1bunx stylexblocks add personaUsage — Ark UI
persona.tsx
12345678910111213141516171819202122232425import { Persona } from "#components/ui/ark-ui/persona.tsx";import { Avatar } from "#components/ui/ark-ui/avatar.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context. Nest Persona.Presence inside your avatar — the badge sizes // from the avatar's --avatar-size and colors from --persona-presence // (set it to a semantic presence token, e.g. presenceOnline). <Persona.Root variant="badge" size="md" style={styles.online}> <Avatar.Root shape="full"> <Avatar.Fallback>SJ</Avatar.Fallback> <Persona.Presence /> </Avatar.Root> <Persona.Details> <Persona.Label>Sara Jansen</Persona.Label> <Persona.SecondaryLabel>Product Manager</Persona.SecondaryLabel> <Persona.TertiaryLabel>Amsterdam · 09:41</Persona.TertiaryLabel> </Persona.Details> </Persona.Root> );}
// styles.online = { "--persona-presence": semanticColors.presenceOnline }// secondary/tertiary labels hide themselves at the smaller sizes