Item with Avatar for Svelte

Q: What size should an avatar be in an Item?

Use Avatar's size prop. This row uses lg, next to a title and a description. ItemMedia does not resize the avatar, so the prop decides.

Q: What does the invite button use?

pill, size="icon-sm", and variant="outline". aria-label is Invite, and PlusIcon is aria-hidden. The row itself is variant="outline" with bg-background.

An outline row for Hayden Bleasel, with an avatar, Last seen 5 months ago, and a round plus button.

Ark UI

One outline row. An avatar sits at the start, then Hayden Bleasel and Last seen 5 months ago. A round plus button sits at the end.

Use an avatar row for a person, with the last-seen line as the description. A Hover Card can show more without leaving the page. In Svelte, Ark UI does not know who was invited.

PreviewCode

Installation

MCP · Pro

Make your AI a shadcn expert

Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.

Get MCP See plans

Part of Pro

Anatomy

Usage

<div class="flex w-full max-w-lg flex-col gap-6"><Item class="bg-background" variant="outline"><ItemMedia><Avatar size="lg"><AvatarImage src="https://github.com/haydenbleasel.png" /><AvatarFallback>HB</AvatarFallback></Avatar></ItemMedia><ItemContent><ItemTitle>Hayden Bleasel</ItemTitle><ItemDescription>Last seen 5 months ago</ItemDescription></ItemContent><ItemActions><Button aria-label="Invite" pill size="icon-sm" variant="outline"><PlusIcon aria-hidden="true" /></Button></ItemActions></Item></div>

FAQ

What size should an avatar be in an Item?

Use Avatar's size prop. This row uses lg, next to a title and a description. ItemMedia does not resize the avatar, so the prop decides.

When does AvatarFallback show, and what should it say?

It shows when the picture can't be displayed, for example on a broken URL. Use the person's initials, HB here, so the row still identifies them.

Why an icon-only plus button?

The row already names the person, so a plus reads as add or invite them without taking room from the text. An icon-only button needs an aria-label; in a list, name the person too, such as Invite Hayden Bleasel, so each button is distinct.

What does the invite button use?

pill, size="icon-sm", and variant="outline". aria-label is Invite, and PlusIcon is aria-hidden. The row itself is variant="outline" with bg-background.

What belongs in the description of a person row?

The one detail that helps people decide what to do: last seen, role, email or team. Keep it to a line; the description is clamped to two.

Is the row accessible to people who can't see the picture?

Yes: the name is in the title, so the picture can stay decorative and the row is read as name, last seen and the Invite button. Add alt text to the image only when it shows something the text doesn't.