Avatar#
Component <neo-avatar> is a style-only frame for one avatar image or fallback. Shares shape tokens with Avatars so a theme renders standalone avatars and avatar groups round, square, or hexagonal together.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Description |
|---|---|
| default | Avatar content. Usually an <img>, but fallback initials or an icon work too. |
| Name | Default | Description |
|---|---|---|
--neo-avatar-size | 2.25rem | Avatar width and height. |
--neo-avatar-radius | 9999px | Corner radius. |
--neo-avatar-clip-path | none | Clip path applied to the frame. |
--neo-avatar-filter | none | Filter applied to the frame. |
--neo-avatar-bg | color-mix(in srgb, var(--page-fg) 8%, transparent) | Fallback background fill. |
--neo-avatar-color | var(--page-fg) | Fallback text color. |
--neo-avatar-border-width | 0 | Border width. |
--neo-avatar-border-color | var(--page-bg, #ffffff) | Border color. |
--neo-avatar-font-size | 0.8125rem | Fallback initials font size. |
--neo-avatar-font-weight | 650 | Fallback initials font weight. |
Examples#
Image#
Set src plus an alt to cover the common portrait case. The image is cropped to the frame with object-fit: cover.
Fallback#
Omit src and give the default slot initials, an icon, or another compact placeholder. Add an aria-label when the fallback text is abbreviated.