I9kAvatar

A round picture of a person or account from any image URL, with a fallback slot (such as initials) for when there is no picture.

View as MarkdownView source

import { I9kAvatar } from '@9klabs/design';

Examples

Picture at each size

<I9kCluster>
  <I9kAvatar size="sm" :src="src" />
  <I9kAvatar size="md" :src="src" />
  <I9kAvatar size="lg" :src="src" />
</I9kCluster>

Fallback initials

IK

<I9kAvatar>IK</I9kAvatar>

Watch out

• A data: URI src (such as a generated avatar) only loads when the consuming site's Content-Security-Policy allows img-src data:.
• The fallback slot is ordinary text, so screen readers read it out unless the caller sets aria-hidden="true" on the avatar — do that when the name is already given beside it.

API

Props

Prop	Type	Default	Required
src	string | null	null	no
alt	string	''	no
size	'sm' | 'md' | 'lg'	'md'	no

Slots

• default

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kAvatar from @9klabs/design for a round picture of a person or account.

import { I9kAvatar } from '@9klabs/design';

Props:
- src?: string | null (default null) — any image URL, including a data: URI. When it is null or empty, the default slot renders instead of the picture.
- alt?: string (default '') — the picture's alternative text.
- size?: 'sm' | 'md' | 'lg' (default 'md') — the diameter follows the shared control scale, --control-height-sm|md|lg, so an avatar sits level with buttons of the same size.

Emits: none.

Slots:
- default — fallback content (for example initials) rendered when there is no `src`.

Accessibility: the picture is decorative by default (alt=''), because an avatar usually sits beside the person's name or inside a button that already has a label. Pass `alt` when the avatar stands alone and nothing else names the person.

The root is a <span class="i9k-avatar i9k-avatar--<size>">; attributes such as aria-hidden fall through to it.

Usage:
<I9kAvatar :src="user.image" size="sm" />
<I9kAvatar alt="Ismail">IK</I9kAvatar>