Components / Avatar
Avatar
An image avatar with accessible initials fallback and configurable size.
html
<aevko-avatar src="/people/ada.jpg" alt="Ada Lovelace" fallback="AL" size="3rem" />Installation
npx aevko-ui@latest add avatar --yesSource ownership
Customization
Provide a product image when available, tune the square size with any CSS length and style the initials fallback in local source.
Edit locallyThe installed template and stylesheet are application code, not a black box.
Theme semanticallyOverride
--aevko-* tokens or ordinary classes without !important.API reference
| Property or slot | Type | Default | Description |
|---|---|---|---|
src | string | null | null | Image URL; fallback appears when absent or loading fails. |
alt | string | required | Accessible name for both image and fallback. |
fallback | string | required | Initials or short text rendered without an image. |
size | CSS length string | '2.5rem' | Width and height of the square avatar. |
Accessibility contract
Accessibility
Included behavior
- The image uses consumer-provided alternative text.
- The fallback exposes the same accessible name.
Your responsibility
Write alternative text that identifies the person or entity; use an empty alt only when the avatar is genuinely redundant.