Avatar
stable 1.1 kB<hk-avatar>Image, initials or icon, with a stack mode that collapses the overflow into a +N. Initials are derived from the name, so a missing image is never a broken image.
#user#image
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | '' | Used for initials and for the accessible name. |
| src | string | '' | Image URL. Falls back to initials on error. |
| size | 'sm' | 'md' | 'lg' | 'md' | Diameter. |
| online | boolean | null | null | Shows a presence dot when set. |
| max | number | 3 | On a stack, how many to show before the +N. |
Keyboard
- Enter Expands a collapsed stack
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-avatar-size | 2.75rem | Diameter. |
| --hk-avatar-ring | #ffffff | Ring between stacked avatars. |
| --hk-avatar-bg | linear-gradient(135deg, #dc2626, #7f1d1d) | Initials background. |
Accessibility
- A broken image falls back to initials rather than an alt-text box.
- Presence is announced as text, not conveyed by the green dot alone.
- The +N overflow is a button that expands the stack, not decoration.