Avatar
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A person as a circle: their picture, their initials, or a placeholder silhouette. Supports filled and outline variants.
It also shows a short code the way it shows a person: a club's three letters, a currency or a stock ticker.
Import
import { Avatar } from "~lib/data-display/avatar";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
name | string | No | N/A | Full name (extracts initials) |
initials | string | No | N/A | Text to show as given, such as "CRY" |
src | string | null | No | N/A | A picture to show in the circle. Leave it out, or pass null, if none |
alt | string | No | name | What screen readers announce |
size | "sm" | "md" | "lg" | string | No | "md" | Size variant (32/48/64px), or any CSS width such as "40%" |
variant | "filled" | "outline" | No | "filled" | Fill style; "outline" also rings a picture |
tone | "picture" | "ink" | No | "picture" | Show the picture as it is, or "ink" to draw only its shape in ink |
Examples
Default
Outline
A Code
Pass initials to show text exactly as you give it, instead of the first letters of a name. The
text shrinks to fit the circle, so two letters are larger than three or four. Keep name too and
it is still what screen readers announce.
<Avatar name="Crystal Palace" initials="CRY" size="lg" />
A Picture
Pass src to show a picture cropped to the circle, in the same greys as a
Cover, so it stays clear on the display. When
there is no picture, or it fails to load, the circle shows the initials or the silhouette instead.
variant="outline" puts a ring around the picture.
<Avatar name={channel.title} src={channel.thumbnailUrl} size="lg" />
In Ink
Some pictures are drawn in one color with see-through parts, such as an emblem, a logo or a
silhouette. Shown as they are, a dark one disappears on a dark frame. Set tone="ink" and the
avatar draws only the picture's shape, in the ink of whichever theme the frame uses, so it reads
on a light frame and a dark one alike. It falls back to the initials, takes the ring and is
announced the same way as a picture.
<Avatar name={sign.name} src={sign.emblemUrl} size="lg" tone="ink" />
A Share of the Width
size also takes any CSS width, such as "40%". The circle spans that share of its parent and
stays round, with its letters growing with it, which suits a profile or a channel centered at the
top of a column.
<div className="flex flex-col items-center gap-2">
<Avatar name={channel.title} src={channel.thumbnailUrl} size="40%" />
<Paragraph size="sm" weight="semibold" align="center">
{channel.title}
</Paragraph>
</div>