Components

Avatar

An image element with a fallback for when the image fails to load.

Displays a user or entity image with graceful fallback to initials or an icon when the image is unavailable or still loading.

Anatomy

#image: The <img> element or full image replacement.
#fallback: Content shown while the image is delayed, loading, or failed.

Usage

AL BK

Examples

Custom fallback

Use #fallback to render initials or an icon with your own styles.

<template>
  <Avatar src="/avatar.jpg" alt="Jane Doe">
    <template #fallback>
      <span class="avatar-initials">JD</span>
    </template>
  </Avatar>
</template>

Delayed fallback

Prevent a flash of the fallback during fast loads.

<template>
  <Avatar src="/avatar.jpg" alt="Jane Doe" text="JD" :delay-ms="300" />
</template>

Custom image element

Use #image to render a custom element instead of a plain <img>.

<template>
  <Avatar>
    <template #image="{ src, alt }">
      <img :src="src" :alt="alt" class="avatar-img" />
    </template>
    <template #fallback>
      <span class="avatar-icon">👤</span>
    </template>
  </Avatar>
</template>

API Reference

Props

Prop	Type	Default	Description
`src`	`string`	—	Image URL.
`alt`	`string`	`""`	Alt text for the image.
`text`	`string`	—	Fallback text (e.g. initials) when no `#fallback` slot is provided.
`delayMs`	`number`	`0`	Delay in ms before showing the fallback. Prevents flash on fast loads.
`as`	`string`	`"span"`	Root element tag.
`ui`	`AvatarUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`image`	`{ src, alt, status }`	The image element.
`fallback`	`{ status }`	Shown when image is unavailable or loading.

status is one of: "idle" · "loading" · "loaded" · "error"

Emits

Event	Payload	Description
`status-change`	`[status: AvatarImageStatus]`	Fired when image loading status changes.

UI Options

Key	Description
`root`	The outer container element.
`image`	The image element.
`fallback`	The fallback element.

Styling Hooks

UI key	CSS class	Data attrs
`root`	`akaza-avatar`	`data-akaza-status`
`image`	`akaza-avatar-image`	—
`fallback`	`akaza-avatar-fallback`	`data-akaza-status`

Alert Dialog

A modal dialog that interrupts the user and requires a response.

Button

A button that can show a loading state during async operations.