Avatar primitive

Headless Avatar: the behavior, keyboard support and ARIA of the WAI-ARIA `img` element's pattern, with no styles.

@ndop/primitives/avatar
WAI-ARIA: `img` element's

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Avatar is built on this one.

import {
  NdAvatar,
  NdAvatarFallback,
  NdAvatarImage,
} from '@ndop/primitives/avatar';

Accessibility

Implements the `img` element's pattern of the WAI-ARIA Authoring Practices.

Focus

The avatar never receives focus and never changes focus.

Right-to-left

Nothing mirrors.

API reference

NdAvatar

[ndAvatar]from @ndop/primitives/avatar

Root of an avatar: an image with a fallback, such as initials, shown until the image loads or when it fails. It tracks the image's status, which every part reflects as data-status for styling.

Data attribute	Values
`data-status`	—

NdAvatarFallback

[ndAvatarFallback]from @ndop/primitives/avatar

What an avatar shows until its image loads, or when it fails: initials or an icon. Hidden from assistive technology once the image has loaded, so the avatar is announced once.

Manages aria-hidden.

Data attribute	Values
`data-status`	—

NdAvatarImage

img[ndAvatarImage]from @ndop/primitives/avatar

An avatar's image: a native img, whose alt names the avatar. Until it has loaded it's hidden from assistive technology, which reads the fallback instead.

Manages aria-hidden.

NdAvatarImage binding	Type	Default
`[src]` The image's URL; without one, the fallback shows.	`string \| null \| undefined`	`—`

Data attribute	Values
`data-status`	—