Avatar

A visual identifier for a user or entity, with image, initials fallback, or icon.

Overview

Avatar displays a user or entity image. When no image is available it falls back to initials derived from the fallback prop or the first character of alt. If neither is provided, it renders a neutral placeholder.

Always provide alt for accessibility even when using a fallback.
Use fallback to override the auto-generated initial (e.g., for two-letter initials like "JD").
Use shape="square" for brand logos or non-person entities.

Accessibility

Provide a meaningful alt text so screen readers can identify the avatar's subject.
When the avatar is decorative and accompanied by visible text, pass alt="" to suppress the announcement.

Import

import { Avatar } from "@cocso-ui/react";

Default

Avatar with an image source, an initials fallback, and a placeholder fallback.

Size

Five sizes are available: xs, sm, md, lg, and xl. The default is md.

Shape

Two shape options are available. Use circle for people and square for brands or entities.

circle

square

API Reference

Avatar

Prop	Type	Default	Description
`src`	`string`	-	URL of the avatar image. When omitted, the component renders a fallback.
`alt`	`string`	-	Alternative text for the image and source for auto-generating a single-letter initial.
`fallback`	`string`	-	Text rendered when no image is available. Overrides the auto-generated initial from `alt`.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Controls the dimensions of the avatar.
`shape`	`"circle" \| "square"`	`"circle"`	Controls the border-radius. Use `square` for logos or non-person entities.