Components

Avatar component

On this page

The kit:avatar component is used to display images, icons or initials representing a person or object. It is often used in user interfaces to identify users, profiles or entities. Thanks to its many customization options, the kit:avatar component adapts easily to different styles and contexts.

<div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
	<kit:avatar>
		<img src="https://picsum.photos/seed/avatar1/80/80" alt="Simone" />
	</kit:avatar>

	<kit:avatar label="BO" />
	<kit:avatar label="BY" />

	<kit:avatar>
		<img src="https://picsum.photos/seed/avatar2/80/80" alt="Laurent" />
	</kit:avatar>
</div>

kit:avatar has two rendering modes:

Label mode - when label is set, the text is displayed uppercase and centered. size and density scale the avatar in this mode.
Image mode - when children is provided instead, the content (typically an <img>) fills the circle. size and density have no effect in this mode.

Examples of avatar

label

Pass a string to label to display initials or short text. The value is trimmed and uppercased automatically.

label: string | undefined = undefined

<div style="display: flex; align-items: center; gap: 0.75rem;">
	<kit:avatar label="A" />
	<kit:avatar label="AB" />
	<kit:avatar label="CD" />
	<kit:avatar label="Nycolaide" />
</div>

Image

Without label, pass an <img> (or any element) as children. The image fills the circle via object-fit: cover.

<div style="display: flex; align-items: center; gap: 0.75rem;">
	{#each ['avatar1', 'avatar2', 'avatar3', 'avatar4'] as seed (seed)}
		<kit:avatar>
			<img src="https://picsum.photos/seed/{seed}/80/80" alt="" />
		</kit:avatar>
	{/each}
</div>

size

Controls the diameter and font size in label mode.

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'

<div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
	{#each ['xs', 'sm', 'md', 'lg', 'xl'] as size (size)}
		<div style="display: flex; flex-direction: column; align-items: center; gap: 0.375rem;">
			<kit:avatar label="AB" {size} />
			<span style="font-size: 0.75rem; opacity: 0.6;">{size}</span>
		</div>
	{/each}
</div>

density

Scales the diameter by a multiplier on top of size, in label mode only.

density: 'compact' | 'default' | 'comfortable' = 'default'

<div style="display: flex; align-items: center; gap: 0.75rem;">
	{#each ['compact', 'default', 'comfortable'] as density (density)}
		<div style="display: flex; flex-direction: column; align-items: center; gap: 0.375rem;">
			<kit:avatar label="AB" {density} />
			<span style="font-size: 0.75rem; opacity: 0.6;">{density}</span>
		</div>
	{/each}
</div>

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

import { Avatar } from 'lapikit/components';

API Reference

kit:avatar

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
s-class	enum	Sets className on avatar.
s-style	enum	Sets styles on avatar.
label	`string`	Text displayed inside the avatar (uppercased).
size	enum	Diameter and font size. Label mode only.	`'md'`
density	enum	Size multiplier applied on top of `size`. Label only.	`'default'`
rounded	enum	Border radius.	`'full'`
children	`Snippet`	Content when `label` is not set (typically an `<img>`).
elevation	`ElevationState`enum	Add shadow effect.
color	`string`	Foreground color override (`--kit-avatar-fg`).
background	`string`	Background color override (`--kit-avatar-bg`).

Associate kit:avatar with user Cards or Chips to display roles or status.