Avatar

An image representing a person or organization, with initials as a fallback.

Installation

import { Avatar } from "@o/pipeline/experimental/components/avatar";

Usage

shape

circle

Use for people or users.

square

Use for organizations or companies.

size

xs

sm

base

md

lg

xl

status

An optional dot at the bottom-right indicates online (green), away (yellow), or offline (gray). The dot scales with the avatar and includes a screen-reader label. Omit status when presence is unknown. For online-only presence, omit status for offline profiles.

Fallback