--- title: "Avatar" description: "An image element with a fallback for representing the user." url: "https://susonwaiba.github.io/htmx-ui/docs/components/avatar" section: "Components" --- # Avatar An image element with a fallback for representing the user. ```html

``` ## Image and fallback `.avatar` holds an `.avatar-image` on top of an `.avatar-fallback`, usually initials or an icon. The fallback shows while the image loads, when there is no image, and when it fails to load: the avatar behaviour hides an image that errors, so the fallback shows instead of a broken-image icon. It runs on avatars in fragments from the server too. Name the person once, on the avatar: `role="img"` and `aria-label` on `.avatar`, `alt=""` on the image and `aria-hidden="true"` on the fallback. Next to the visible name, the avatar is decorative: drop the role and label and give it `aria-hidden="true"`. ```html

``` ## Sizes `.avatar-sm` (1.5rem), the default (2rem), `.avatar-lg` (2.5rem) and `.avatar-xl` (3.5rem). The fallback text and badge scale with them; any `size-*` utility works too. ```html

``` ## Badge `.avatar-badge` adds a dot at the bottom right, ringed in the page colour. It is `bg-primary`; colour it with any `bg-*` utility for a status. A dot means nothing to a screen reader, so say the status in the avatar's label. ```html

``` ### Badge with an icon An icon inside the badge makes it big enough to read. ```html

``` ## Group `.avatar-group` overlaps avatars in a row and rings each one in the page colour. Give it `role="group"` and a label. ```html

``` ### With a count `.avatar-group-count` on an `.avatar` ends the group with the number of people not shown. It takes the avatar size classes. ```html

+12

``` ### With an icon An icon in the count, on a button, makes an action at the end of the group, such as inviting someone. ```html

``` ## As a menu trigger An avatar can be the button itself, here opening a [dropdown](https://susonwaiba.github.io/htmx-ui/docs/components/dropdown) of account actions. `.avatar` on a ` ``` ## Reference | Class | Description | | --- | --- | | `.avatar` | Round frame, 2rem. On a button or link: pointer and focus ring. | | `.avatar-image` | The picture, covering the fallback. Give it alt="". Hidden if it fails to load. | | `.avatar-fallback` | Initials or an icon underneath; shows when there is no image or it fails. | | `.avatar-sm / -lg / -xl` | 1.5rem, 2.5rem, 3.5rem; fallback text and badge scale. | | `.avatar-square` | Rounded square instead of a circle. | | `.avatar-badge` | Bottom-right dot (bg-primary; colour with bg-*). Bigger with an icon inside. | | `.avatar-group` | Overlapping row, each avatar ringed in the page colour. | | `.avatar-group-count` | On an .avatar: "+3" or an icon at the end of a group. |