Svelte Component

Avatars

Display user avatars with an image or initials.

typescript
import { Avatar } from '@skeletonlabs/skeleton';
Source Page Source

Demo

rounded-full

Using Initials

Display up to two text characters. (ex: Jane Doe would be JD)

JD

Fallback

Use the default slot to provide fallback images, icons, or text.

Interactive Border

Apply the following styles using the border and cursor properties.

SK

Applying Filters

See Filters to learn how to import and configure the filters action and SVG filter components.

typescript
import { filter, Apollo } from '@skeletonlabs/skeleton';