Avatars

Using Images

Display an image source cropped into the shape.

<Avatar src="https://i.pravatar.cc/" />

Using Initials

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

<Avatar initials="JD" />

Interactive Border

Apply the following styles using the border and cursor properties.

<Avatar ... border="border-4 border-surface-300-600-token hover:!border-primary-500" cursor="cursor-pointer" />

Applying Filters

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

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

Via Filter Action

Import the filter action reference using action and set actionParams to the desired filter id.

<Avatar src="https://i.pravatar.cc/" action={filter} actionParams="#Apollo" />

Via Style Attribute

<Avatar src="https://i.pravatar.cc/" style="filter: url({'#Apollo'})" />