Avatar — Loidolt Theme

import { Avatar } from '@loidolt/theme-svelte';

Example

Label Studio

Notes

The avatar has one accessible name, from alt or name, whether the photo or the initials are showing. Leave both unset when adjacent text already names the person.
Sizes follow the control heights, so an avatar sits level with buttons of the same size.
delayMs holds the initials back briefly, so a photo that loads quickly never flashes them first.

Props

Generated from the component source, so it cannot drift from the implementation.

Avatar props
Prop	Type	Default	Notes
`alt`	`string`	`—`	Accessible name when it should differ from `name`.
`class`	`string`	`—`
`delayMs`	`number`	`0`	Milliseconds before the fallback appears, so a fast image never flashes initials first.
`fallback`	`Snippet`	`—`	Custom fallback, e.g. a generic person glyph. Replaces the initials.
`initials`	`string`	`—`	Fallback text. Defaults to the first letters of the first and last word of `name`.
`loadingStatus` bindable	`LoadingStatus`	`'loading'`
`name`	`string`	`—`	Who this is. Names the avatar for assistive tech and supplies the fallback initials. Leave both `name` and `alt` unset when adjacent text already names the person — the avatar is then decorative.
`onLoadingStatusChange`	`(status: LoadingStatus) => void`	`—`
`ref` bindable	`HTMLElement \| null`	`null`
`size`	`ControlSize`	`'md'`	Matches the control heights, so an avatar sits level with buttons of the same size.
`src`	`string`	`—`	Image URL. Without one, or while it loads or after it fails, the fallback shows.

Plus the attributes of Omit< AvatarRootProps, 'child' | 'children' | 'loadingStatus' | 'onLoadingStatusChange' | 'ref' >, forwarded to the root element.