Avatar

name

string

Default: —

Used to derive fallback initials.

src

string

Default: —

Image source URL.

icon

ReactNode

Default: —

Custom fallback icon, used when name/initials aren't available.

fallback

ReactNode

Default: —

Fully custom fallback content, overrides icon/initials.

showFallback

boolean

Default: false

Forces the fallback (initials/icon) even while an image is loading.

size

"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | number

Default: md

Token size, or a number for an exact px size (font-size scales ~0.4x; the status Badge maps to the nearest token bucket). AvatarGroup forces its size onto children.

color

"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"

Default: default

Semantic color for the fallback background.

radius

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"

Default: full

Border radius.

colorDepth

50 | 100 | ... | 950

Default: 500

Shade depth for the selected color.

isBordered

boolean

Default: false

Adds a ring border around the avatar.

isDisabled

boolean

Default: false

Dims the avatar and disables interaction.

isFocusable

boolean

Default: false

Makes the avatar keyboard-focusable.

tooltip

ReactNode | boolean | (Omit<TooltipProps, "children"|"content"> & { content?: ReactNode })

Default: false

Wraps the avatar in a Tooltip. A plain value is shorthand content; bare true derives content from name; an object accepts any Tooltip prop plus an optional content override.

status

"online" | "offline" | "dnd"

Default: —

Status dot indicator.

ImgComponent

ElementType

Default: "img"

Renders the image through a different component (e.g. next/image).

imgProps

ComponentPropsWithoutRef<ImgComponent>

Default: —

Extra props forwarded to the image element/component.

classNames

Partial<Record<AvatarSlot, string>>

Default: —

Per-slot class overrides (base/img/fallback/name/icon/status).

className

string

Default: —

Class applied to the root element.