Skip to content
75NeoUI
reactvue

component · vue

Avatar

Nine sizes across two shapes and seven colors, with an image, a fallback, and a slot for a framework image component.

avatar

AL
GH
AT
KJ
RP
BL

An avatar shows src when it loads and its fallback until then. Without a src it shows the fallback outright, so the two cases need no branching at the call site.

<Avatar src="/ada.jpg" alt="Ada Lovelace" name="Ada Lovelace" />
<Avatar name="Ada Lovelace" />
<Avatar name="Ada Lovelace" shape="square" color="primary" />
<Avatar src="/ada.jpg" alt="Ada Lovelace" name="Ada Lovelace" />
<Avatar name="Ada Lovelace" />
<Avatar name="Ada Lovelace" shape="square" color="primary" />

The fallback resolves in three steps. An explicit fallback wins outright, null included. Otherwise a name gives its initials. Otherwise the avatar renders empty.

A framework image component

next/image and NuxtImg have to merge Ark UI’s own image props rather than be handed a src, so both adapters hand those props back out: renderImage in React, the image slot in Vue.

Spread props onto your element, and apply the class and data-slot="image" too, or theme overrides will miss it. Honour hidden yourself. Ark hides the image until it loads, and a component that drops the attribute needs visibility applied instead.

Slots

The same word names the recipe slot, the data-slot attribute and the key in ui.

  • base
  • fallback
  • image

Variants

Read off the recipe, so these are the values that actually resolve. A Theme layer can change which one is the default; it cannot add a value.

color
primarysecondarysuccessinfowarningerrorneutral
size
3xs2xsxssmmdlgxl2xl3xl
shape
circlesquare

Props

Taken by both adapters, read out of the component module. The same names and the same types work in React and Vue.

ui

AvatarUI

Per-slot class overrides.

color

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

Defaults to "neutral"

size

"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

Defaults to "md"

shape

"circle" | "square"

Defaults to "circle"

src

string

Image to show. Without one the avatar shows its fallback.

alt

string

name

string

Display name. Its initials are the default fallback.

fallback

Component | string

Shown until the image loads, and instead of it if there is none.

Vue only

class

unknown

ids

{ root?: string; image?: string; fallback?: string }

onStatusChange

(details: { status: "loading" | "loaded" | "error" }) => void

#fallback

{ content: string | undefined }

Replace the fallback. Falls back to the initials in `content`.
#image

{ src: string; alt: string; class: string; hidden: boolean; props: Record<string, unknown>; }

Render a custom image element in place of the default one, for `NuxtImg` or anything else that has to merge Ark's own image props. Bind `props`, `class` and `data-slot="image"`, and honour `hidden` with `visibility` if your element drops the attribute.