Avatar @astryx-svelte/core v0.3.0 · Avatar
Usage
Avatar represents a person or team with a profile photo, initials, or a default icon. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Always pass a name so the avatar can show initials if the photo fails to load, and so screen readers can announce who it represents. |
| Do | Pick a size that matches the context: xsm or sm for inline mentions, md or lg for lists and cards, xl for profile headers. |
| Do | Add a status dot when knowing someone's availability matters, like in chat or team views. |
| Do | When wrapping an Avatar in your own Tooltip or HoverCard, set tooltip={false} so the built-in name tooltip does not overlap yours. |
| Don't | Use Avatar for logos, product images, or anything that isn't a person or team. Use an image or icon instead. |
| Don't | Force a square or custom shape. Avatars are always circular to stay consistent across the system. |
Examples
Common configurations, variations, and states.Avatar — Fallback Chain
Demonstrates the avatar fallback chain: primary image, fallback image, initials, then default icon.
Avatar — Initials
Show initials instead of a photo. The avatar extracts the first and last initials from the name automatically. Use when you only have a user name, like in anonymous accounts or new user onboarding.
Avatar — Interactive
Make an avatar interactive by passing
href to render it as a link or onClick to render it as a button. Both forms are focusable and show a focus-visible ring for keyboard users. Use for profile links, mention pop-ups, or any avatar people can act on. Avatar — Tooltip
By default an avatar shows its name in a tooltip on hover and keyboard focus. Pass a string to show custom text instead, or false to turn the tooltip off.
Avatar — User Card
Place an avatar next to a name and role to create a user card row. Use for comment headers, contact lists, profile sections, or anywhere you need to identify a person at a glance.
Avatar — Photo
Show a profile photo at different sizes. Use when you have a user photo URL. If the image fails to load, initials are shown instead.
Avatar — Status Dot
Add a status dot to an avatar to show whether someone is online, away, or busy. Use in chat, messaging, or any UI where knowing availability matters.