Skip to content
Yuzur1ha Open

Component referenceDraft

Avatar

Avatar identifies a person or service with an image and a stable fallback.

Updated

Design notes

Image loading or failure should preserve the same footprint. Supply alternative text that fits the surrounding context.

Design sourceOpen in Figma

Avatar design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx
AMAM

content/components/avatar/demo.tsx

import { useState } from "react"
import { Avatar, TextField } from "@yuzur1ha/ui"

export function AvatarDemo() {
  const [name, setName] = useState("Alex Morgan")
  return (
    <>
      <div className="demo-row">
        <Avatar name={name} />
        <Avatar name={name} size="small" />
      </div>
      <TextField
        label="Display name"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
    </>
  )
}

API

Avatar

An image with initials as fallback. Native span attributes and ref apply to the wrapper; name determines its accessible label.

AvatarProps
PropertyTypeRequiredDefaultDescription
namestringYes—Accessible image name and source of up to two fallback initials.
srcstringNo—Image URL. Missing or failed images fall back to initials.
size"small" | "large"No"large"Avatar dimensions: small or large.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLSpanElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.