Avatar

A person or a thing, as a round image with a fallback.

The fallback is the point: an <img> whose src 404s leaves a broken-image glyph in every browser, so this swaps to initials instead, and shows them while the image is still loading rather than flashing an empty circle.

Feedback

<script lang="ts">
	import { Avatar } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
src	string	—	Image URL. While it loads, and if it fails, the fallback shows instead.
alt	string	''	Describes the image. Empty means decorative — name the person nearby.
fallback	string	—	Shown while loading and if the image fails. Defaults to alt's initials.
size	Size	'md'	sm 28px · md 36px · lg 48px.
class	string	—	Merged with the component's own classes, last — so yours win.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Avatar alt="Ada Lovelace" size="sm" />
<Avatar alt="Grace Hopper" />
<Avatar alt="Alan Turing" size="lg" />

Feedback · Badge · Alert · Progress · Spinner · Skeleton · Toaster · Image

---

← All components · Getting started · Theming · source