Components

Avatar

A picture of a person or an account, with initials or an icon when there is no picture or it fails to load.

Usage

An Avatar is as tall as a control of its size and round by default. Its content, initials or an Icon, is the fallback: shown when there is no src and when the image fails to load, and painted in the tonal variant of its color.

Member.svelte

<script>
  import { Avatar } from 'sveltier';
</script>

<!-- A name is shown next to it, so the avatar is decorative. -->
<Avatar src={user.photo}>AM</Avatar> Alex Morgan

<!-- On its own, it needs alt text. -->
<Avatar src={user.photo} alt="Alex Morgan" size="lg">AM</Avatar>

Accessibility

An Avatar is decorative and hidden from screen readers unless it has alt text. Next to a name, leave it out; on its own, give it the name it stands for, and it becomes an image with that name.

API

Name	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Width and height: the control height of the size.
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`'tonal'`	How the fallback is painted.
`color`	`Color`	`'neutral'`	The colour of the fallback.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'full'`	Corner rounding.
`src`	`string`	`–`	The image.
`alt`	`string`	`–`	Who or what the avatar shows, for screen readers. Leave it out when a name is shown next to the avatar: it is then decorative and hidden from them.
`children`	`Snippet`	`–`	Initials or an icon, shown while there is no image or it failed to load.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLSpanElement \| null`	`–`	The root element, bindable with `bind:ref`.