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

Interactive Border

Apply the following styles using the border and cursor properties.

AB

Handling Fallbacks

Use the fallback property to specify a fallback when images fail to load, or supply the user's initials.

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';