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
labelis set, the text is displayed uppercase and centered.sizeanddensityscale the avatar in this mode. - Image mode - when
childrenis provided instead, the content (typically an<img>) fills the circle.sizeanddensityhave 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 |
|---|---|---|---|
| ref $bindable | HTMLElement | Bindable reference to the rendered DOM element. | null |
| s-class | enum'string''array''object' | Sets className on avatar. | |
| s-style | enum'string''array''object' | Sets styles on avatar. | |
| label | string | Text displayed inside the avatar (uppercased). | |
| size | enum'xs''sm''md''lg''xl' | Diameter and font size. Label mode only. | 'md' |
| density | enum'none''compact''default''comfortable' | Size multiplier applied on top of size. Label only. | 'default' |
| rounded | enum0'xs''sm''md''lg''xl''full' | Border radius. | 'full' |
| children | Snippet | Content when label is not set (typically an <img>). | |
| elevation | ElevationStateenum'0''1''2''3''4''5' | 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.