Avatars
Display user avatars with an image or initials.
import { Avatar } from '@brainandbones/skeleton';Usage
Image
Display an image source cropped into the shape.
<Avatar src="https://i.pravatar.cc/" />Initials
Display up to two text characters. (ex: Jane Doe would be JD)
<Avatar initials="JD" />Using Filters
See Filters to learn how to import and configure the filters action and SVG filter components.
import { filter, Apollo, /* ... */ } from '@brainandbones/skeleton';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" />Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| background | string | bg-surface-500 | Provide classes to set background styles. |
| width | string | w-12 | Provide classes to set avatar width. |
| border | string | - | Provide classes to set border styles. |
| rounded | string | rounded-full | Provide classes to set rounded style. |
| shadow | string | - | Provide classes to set shadow styles. |
| cursor | string | - | Provide classes to set cursor styles. |
Image
| Prop | Type | Default | Values | Description |
|---|---|---|---|---|
| src | string | - | - | Set image source value. |
| alt | string | - | - | Set image alt text value for accessability. |
| action | string | - | (Svelte action) | Provide an Svelte action reference, such as filter. |
| actionParams | string | - | (filter ID) | Provide Svelte action params, such as Apollo. |
Initials
| Prop | Type | Default | Description |
|---|---|---|---|
| initials | string | AB | Provide up to two text characters. |
| fill | string | fill-white | Provide classes to set the text fill color. |