User
Identity composite: an avatar with a name, description, and optional action slot
Category: display · WCAG 2.2-AA · user, avatar, identity, display
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | ReactNode | — | The user’s display name. |
description | ReactNode | — | Supporting description text. |
avatarProps | AvatarProps | — | Forwarded to the composed <Avatar> |
Design tokens
--cascivo-color-text--cascivo-color-text-muted--cascivo-space-3--cascivo-text-sm--cascivo-text-xs
When to use
- Showing a person with their name and a secondary line (email, role) next to an avatar
- Identity rows inside menus, tables, navbars, and account switchers
- A compact, labelled identity primitive too granular for a page-section block
When not to use
- Just an image with no name/description — use Avatar directly
- A full profile card with rich content — compose a Card instead
How to build an accessible User in React →
Examples
Basic
<User name="Jane Doe" description="[email protected]" avatarProps={{ src: "/jane.jpg", alt: "Jane Doe" }} />With action
<User name="Jane Doe" description="Admin"><IconButton aria-label="More" /></User>Related components
- Avatar — User wraps Avatar and forwards avatarProps to it
- AvatarGroup — Use AvatarGroup to show several identities as an overlapping stack