Svelte Component

Avatars

Display user avatars with an image or initials.

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

Demo

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

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