Components
Avatar
A profile image with initials when the image is missing or cannot load.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: avatar,avatarFallback,avatarImage.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
name | string | '' | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
src | string | undefined | undefined | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Avatar from sveltewind/components. This example shows its default styling in a usable context.
Loading...Use name for both the accessible label and the initials fallback. Decorative images use an empty alt inside the labeled wrapper.
Examples
Theme variants
Every variant available for Avatar in the built-in themes is shown below.
lg — Apply the lg variant.
Loading...sm — Apply the sm variant.
Loading...square — Apply the square variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Apply rounded-full font-semibold shadow-sm locally.
Loading...Props and behavior
Change name while retaining the default component styling.
Loading...Content and values
Provide different name values.
Loading...