Avatar

Component

Storybook

Figma Demo

Guidelines

Variations

There are currently three variations of the avatar in size only:

• lg (48px)
• base (40px)
• sm (32px)

Usage

Use the avatar whenever you need to represent a specific user, such as adjacent to a “view profile” link or within a messaging experience.

Content

Only the first initial of the user’s name is used inside the avatar.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• label: string | Default: undefined
  The label of the avatar.

• size: 'sm' | 'default' | 'lg' | Default: 'default'
  The size of the avatar.

• testId: string | Default: 'test-avatar'
  The test id of the avatar text container.

Example

<script>
	import { Avatar } from '@getprovi/craft-svelte';
</script>

<Avatar size="sm" label="B" testId="test-avatar-text" />
<Avatar label="B" />
<Avatar size="lg" label="B" />

Types

interface Props {
	class?: string;
	label?: string;
	size?: 'sm' | 'default' | 'lg';
	testId?: string;
}