Avatar API

Component status:: stable

Import

import { Avatar } from "@stratakit/bricks";
// OR
import Avatar from "@stratakit/bricks/Avatar";

Avatar

Base element: <span>

An avatar to represent a user or organization.

By default, this component assumes that the avatar is decorative, so it adds aria-hidden by default.

<Avatar initials="JD" />

If the avatar is semantically meaningful, the alt prop can be used to provide alternative text.

<Avatar initials="JD" alt="John Doe" />

Image & size examples:

<Avatar initials="JD" alt="John Doe" size="xlarge" image={<img src="…" alt="">} />
<Avatar initials="JD" alt="John Doe" size="small" image={<Icon href="…">} />

alt

Type: string | undefined (optional)

Alternative text describing the avatar, typically the user’s or organization’s full name.

When this prop is passed, the avatar gets rendered as role="img" and labelled using the provided text.

This prop is not required if the avatar is purely decorative. By default, the avatar will be hidden from the accessibility tree.

image

Type: Element | undefined (optional)

Image to be displayed. Can be <img> or <svg> or anything else.

initials

Type: string | undefined (optional)

Initials that gets displayed in the absence of an image.

size

Type: "small" | "medium" | "large" | "xlarge" | undefined (optional)

Default: "medium"

The size of the avatar.

Additional props

render