Avatar component

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.

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

Image

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

size

Controls the diameter and font size in label mode.

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

density

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

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

Without preprocess Lapikit

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

API Reference

kit:avatar

props	type	description	default
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'`
children	`Snippet`	Content when `label` is not set (typically an `<img>`).

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