1. Components
  2. Data display
  3. Avatar

Avatar

An image element with a fallback for representing the user.

Report an issueEdit this page
<Avatar src="https://github.com/mehdibha.png" alt="@mehdibha" fallback="M" />

Installation

npx dotui-cli@latest add avatar

Usage

Use Avatar to represent a user or an organization.

Options

Shape

Avatar can be either a circle or a square using the shape prop.

<Avatar shape="square" />
<Avatar shape="circle" />

Size

Use the size prop to control the size of the Avatar. The default variant is md.

<Avatar size="sm" />
<Avatar size="md" />
<Avatar size="lg" />

Composition

If you need to customize things further, you can drop down to the composition level.

<AvatarRoot>
  <AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
  <AvatarFallback>M</AvatarFallback>
  <AvatarPlaceholder>
    <UserIcon className="size-5" />
  </AvatarPlaceholder>
</AvatarRoot>

API Reference

Avatar accepts all image attributes.

PropTypeDefaultDescription
src*
string
-
Specifies the path to the image
alt
string
-
Specifies an alternate text for the image, if the image for some reason cannot be displayed
shape
'circle' | 'square'
'circle'
The shape of the avatar.
size
'sm' | 'md' | 'lg'
'md'
The size of the avatar.
fallback
ReactNode
-
The fallback element to render when an image is not available.

Last updated on 10/11/2024

TableBadge