Profile Card

The expanded identity panel for a sidebar: a square avatar tile, a name that can carry a verification mark, a role line, a short list of facts and the actions that belong to that person.

tsx

1import {
2  ProfileCard,
3  ProfileCardAvatar,
4  ProfileCardName,
5  ProfileCardSubtitle,
6  ProfileCardMeta,
7  ProfileCardMetaItem,
8  ProfileCardActions,
9} from "@pestoui/core"

Full card

Every part is optional and they stack in the order you write them. Actions are stacked full width, so two buttons never truncate each other at sidebar width.

Product lead

Workspace owner

Team workspace
Joined this quarter

Small

size="sm" buys a smaller tile and tighter padding. The type does not shrink.

Ops manager

Admin

Props

Prop	Type	Default	Description
size	"sm" \| "default"	"default"	On ProfileCard. Tile size, padding and radius.
children	ReactNode	—	On ProfileCardAvatar. Initials, an icon, or a bare img — the tile clips and sizes it.
badge	ReactNode	—	On ProfileCardName. A mark after the name — a verification glyph, a tier icon.
badgeSrLabel	string	—	On ProfileCardName. The badge's accessible name. A bare glyph is silent without it.
icon	ReactNode	—	On ProfileCardMetaItem. Leading mark for the row.
className	string	—	On any part. Set the card's width on ProfileCard.

PreviousPopover Next Progress

Pesto UI · 117 documented components