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" />
<Avatar src="https://githubbb.com/mehdibha.png" alt="@mehdibha" fallback="M" /> // invalid URL

Installation

npx dotui-cli@latest add avatar

Anatomy

import { Avatar } from "@/components/core/avatar";
 
<Avatar src=".." alt=".." />;
import {
  AvatarRoot,
  AvatarImage,
  AvatarFallback,
  AvatarPlaceholder,
} from "@/components/core/avatar";
 
<AvatarRoot>
  <AvatarImage src=".." alt=".." />
  <AvatarFallback>..</AvatarFallback>
  <AvatarPlaceholder />
</AvatarRoot>;

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
shape'circle' | 'square''circle'The shape of the avatar.
size'sm' | 'md' | 'lg''md'The size of the avatar.
fallbackReactNode-The fallback element to render when an image is not available.

Last updated on 10/11/2024

Progress BarBadge
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.