User Chip
Sourcecomponents/UserChip.astro
The chip
The signed-in identity block — an Avatar beside a name and a muted role line. It sits at the foot of the Side Nav; add href to make the whole thing a link.
initials · photo · link
Built from
- Avatar — the circle. With no photo it shows white initials on brand violet.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | — | The person — the bold line, and the source for the initials fallback. Required. |
role | string | — | The muted second line (e.g. "Designer"). |
avatarSrc | string | — | Photo. Falls back to initials when absent. |
initials | string | — | Override the initials derived from name (e.g. "AZ"). |
href | string | — | Makes the whole chip a link (with a hover surface) — e.g. to account. |
Usage
Give it a name and usually a role. Pass initials to control the fallback, or an avatarSrc for a photo.
<!-- Foot of the side nav -->
<UserChip name="Alex Morgan" role="Designer" initials="AZ" href="/account" />
<!-- With a photo -->
<UserChip name="Miriam Beck" role="Founder" avatarSrc="/img/miriam.png" />Rules
Do
Keep it to two lines — name, then a short role.
Add href only when the chip really goes somewhere.
Don't
Pack extra actions into it — pair it with a menu instead.
Confuse it with a Prompt Pill — that's a CTA, this is identity.