Components/Data Display/Avatar

Avatar

Data Display

User avatar with image, initials fallback, and online indicator.

Displays an image or falls back to computed initials from alt. Initials use the first and last characters of the alt string. Five sizes from xs to xl.

Usage

import { Avatar } from "nosible-ux"

export default function Example() {
  return <Avatar src="/analysts/jane.jpg" alt="Jane Smith" size="md" />
}

Examples

Fallback initials

Sizes

Accessibility

alt is required and used as the image alt text and for initial computation. The avatar wrapper has role="img" when the image fails to load.

Props

Name	Type	Default	Description
`alt`	`string`	—	Accessible description of the image — used as aria-label on the container. Required.
`color`	`string \| undefined`	`"var(--c-neo-green)"`	Background color of the fallback initials tile.
`fallback`	`string \| undefined`	—	Initials shown when the image is unavailable. Defaults to first+last initials from `alt`.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	`"md"`	Visual size of the avatar.
`src`	`string \| undefined`	—	URL of the avatar image.

← All Components Getting Started →