'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Persona
A person at a glance: avatar with presence, a name and up to two more lines (role, status), in four sizes, with the text after or below the avatar and something at the end.
import { Persona } from '@alea/ui';
Examples
Persona
An avatar with presence, a name and up to two more lines, in four sizes; text after or below the avatar.
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Size
size - Status
status - Text Position
textPosition
Anatomy
The parts of the component and the class that styles each one.
Measurements
Measured from the rendered component at 2x: height, width, padding, radius and icon.
Every size and space is a multiple of 4 px.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Type
--alea-font-size-base…--alea-font-size-lg…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Props
Persona props
A person at a glance: avatar with presence, name, and up to two more lines. For lists, cards, menus and comments.
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | The person's (or team's) name. |
className | string | - | Extra class names. |
end | ReactNode | - | Something at the end: a badge, a button. |
secondary | ReactNode | - | A second line: role, email. |
size | "sm" | "md" | "lg" | "xl" | 'md' | sm (24 px avatar, one line), md (40 px, default), lg (56 px), xl (80 px). |
src | string | - | Photo URL. |
status | "online" | "away" | "busy" | "offline" | - | A presence dot on the avatar. |
tertiary | ReactNode | - | A third line, shown from size lg: status message, last seen. |
textPosition | "after" | "below" | 'after' | Text after the avatar (default) or below it, centered. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
sizesmmdlgxlstatusonlineawaybusyofflinetextPositionafterbelow- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-persona.alea-persona-text.alea-persona-name.alea-persona-secondary.alea-persona-tertiary.alea-persona-end- Data attributes
data-size=smdata-text=belowdata-size=lgdata-size=xl
Accessibility
- The avatar is named with the person and their presence, so the status is not only a color.
- Text truncates with an ellipsis; give the full value somewhere else when it matters.
Do and don't
Do
- Use it in lists, menus and cards wherever a person appears.
Don't
- Don't make the whole persona a button and also put buttons in end.