Avatar

Name: Boreal UI
Author: Davin Chiupka

The Avatar component is used to display a user's profile image, initials, or custom content with support for status indicators.

Usage & Examples

Default

default.tsx

<Avatar name="Davin Chiupka" />

Visual variants

Themes

primary

secondary

tertiary

quaternary

States

success

warning

error

info

Sizes

small

medium

large

Variants

solid

outline

glass

Shadows

none

light

strong

visual-variants.tsx

// Themes
<Avatar theme="primary" name="Davin Chiupka" />
<Avatar theme="secondary" name="Davin Chiupka" />
<Avatar theme="tertiary" name="Davin Chiupka" />
<Avatar theme="quaternary" name="Davin Chiupka" />

// States
<Avatar state="success" name="Davin Chiupka" />
<Avatar state="warning" name="Davin Chiupka" />
<Avatar state="error" name="Davin Chiupka" />
<Avatar state="info" name="Davin Chiupka" />

// Sizes
<Avatar size="xs" name="Davin Chiupka" />
<Avatar size="small" name="Davin Chiupka" />
<Avatar size="medium" name="Davin Chiupka" />
<Avatar size="large" name="Davin Chiupka" />

// Variants
<Avatar variant="solid" name="Davin Chiupka" />
<Avatar variant="outline" name="Davin Chiupka" />
<Avatar variant="glass" name="Davin Chiupka" />

// Shadows
<Avatar shadow="none" name="Davin Chiupka" />
<Avatar shadow="light" name="Davin Chiupka" />
<Avatar shadow="strong" name="Davin Chiupka" />

Interaction states

Disabled

interaction-states.tsx

// Disabled
<Avatar disabled name="Davin Chiupka" />

Props API

Avatar props API
				Default	Description
`alt`	`string`	No	props	`—`	Alternative text for the avatar image. Used as the image alt text and may also contribute to the accessible name.
`aria-current`	`boolean \| "page" \| "step" \| "location" \| "date" \| "time"`	No	aria	`—`	Indicates the current state or item within a set when the avatar acts as a link. Example: page, step, location, date, time, true.
`aria-describedby`	`string`	No	aria	`—`	References the element(s) that describe the avatar with additional context. Useful for status, activity, or profile details.
`aria-label`	`string`	No	aria	`—`	Explicit accessible name for the interactive avatar element. Overrides inferred labels such as label, alt, or name.
`aria-labelledby`	`string`	No	aria	`—`	References the element(s) that label the avatar. Should take precedence over aria-label when provided.
`children`	`ReactNode`	No	props	`—`	Custom child elements (replaces avatar content entirely).
`className`	`string`	No	styling	`—`	Custom class names for the avatar container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Disables interaction and styles as disabled.
`fallback`	`ReactNode`	No	props	`—`	Custom fallback content (overrides initials).
`href`	`string`	No	props	`—`	If provided, avatar becomes a link (internal or external).
`imageFill`	`boolean`	No	props	`false`	If true, passes a `fill` prop to a custom image component such as Next.js Image. Plain img rendering should leave this false.