<aihio-avatar> v1.0.0 Markdown for agents

Avatar

A round picture of a person or entity, such as the account owner in a header, falling back to initials when there is no image or it fails to load.

Intents identity labeling

Variants

Every value of the attributes that change how it looks. The values come from the schema.

`size`

Avatar size

size="sm"

size="md"

size="lg"

Examples

Each one rendered live, over the markup that produces it.

With an image

alt names the person for screen readers.

<aihio-avatar src="/avatar.jpg" alt="Jane Doe"></aihio-avatar>

Initials from the name

With no src, the initials are taken from alt.

<aihio-avatar alt="Jane Doe"></aihio-avatar>

Explicit initials, large

fallback sets the initials directly.

<aihio-avatar fallback="JD" size="lg"></aihio-avatar>

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

Missing alt.

Screen readers will announce only the filename.

Don't

<aihio-avatar src="/u.jpg"></aihio-avatar>

aihio lint reports

avatar-alt error Provide alt describing the person or entity (e.g. alt="Jane Doe"). Empty alt is only acceptable for purely decorative avatars.

<aihio-avatar src="/u.jpg" alt="Jane Doe"></aihio-avatar>

Avatar renders its own content; passed children are replaced.

Use the fallback attribute instead.

Don't

<aihio-avatar>JD</aihio-avatar>

aihio lint reports

invalid-child error child #text is not allowed here. Expected: .
avatar-fallback error Provide alt so initials can be derived, or set fallback explicitly.

<aihio-avatar fallback="JD" alt="Jane Doe"></aihio-avatar>

API

Every attribute, property, method, and event the schema declares for aihio-avatar.

Attributes

src: string; Image URL for the avatar
alt: string; Alt text for the image. Initials are derived from this if no fallback is set.
fallback: string; Fallback text displayed when image is unavailable
size: one of smmdlg default md; Avatar size

Composition

Allowed children: none

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

error When src is set

Provide alt describing the person or entity (e.g. alt="Jane Doe"). Empty alt is only acceptable for purely decorative avatars.

Checked as avatar-alt
error When src is not set and fallback is empty

Provide alt so initials can be derived, or set fallback explicitly.

Checked as avatar-fallback

Handled for you

Image alt is forwarded from the alt attribute
Falls back to initials derived from alt when the image fails to load

In patterns

Canonical compositions that use aihio-avatar.

Data Card Grid