Avatars

import { Avatar } from '@skeletonlabs/skeleton';

Demo

Using Initials

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

Interactive Border

Apply the following styles using the border and cursor properties.

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 Copy

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