Display

Avatar

A person's picture, or their initials when there is none.

Installation

npx sinaui add avatar

Copy src/lib/ui/Avatar.svelte and tokens.css. No dependencies.

Examples

Initials

Initials come from the first and last words of the name.

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<Avatar name="Maryam al-Ijliya" />

Small

For lists and dense rows.

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<Avatar name="Ibn Sīnā" size="sm" />

Large

For profiles and headers.

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<Avatar name="Al-Khwārizmī" size="lg" />

With a picture

The picture fades in over the initials once it has loaded, so nothing pops in.

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<Avatar
	name="Ebn Sina"
	src="https://avatars.githubusercontent.com/u/26293733?v=4&size=64"
	size="lg"
/>

When the picture fails

A picture that can't load leaves the initials in place.

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<!-- The image fails to load, so the initials stay. -->
<Avatar name="Fāṭima al-Fihrī" src="https://example.invalid/fatima.png" size="lg" />

Next to a name

When the name is already written beside it, mark the avatar decorative so screen readers don't read the name twice.

Thābit ibn Qurra Translator, Baghdad

<script lang="ts">
	import Avatar from '#lib/ui/Avatar.svelte';
</script>

<div class="person">
	<Avatar name="Thābit ibn Qurra" decorative />
	<div>
		<strong>Thābit ibn Qurra</strong>
		<span>Translator, Baghdad</span>
	</div>
</div>

<style>
	.person {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}
	.person div {
		display: grid;
	}
	.person span {
		color: var(--ui-muted);
		font-size: 0.875rem;
	}
</style>

Props

Prop	Type	Default
`name`	`string` (required)
`src`	`string`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`decorative`	`boolean`	`false`

Accessibility

Read as an image named after the person, whether it shows a picture or initials.
Initials are muted text on a tint, at 4.5:1 contrast or more in both themes.