Avatar component for building consistent, accessible interfaces.
Loading demo: avatar-real-world
npx sdaia-ui@latest add avatar
import { Avatar } from "@/components/ui/avatar"<Avatar size="sm" type="initials" initials="AB" statusDot />Props for the Avatar component.
Prop | Type | Default | Required |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | optional |
type | 'initials' | 'icon' | 'image' | 'initials' | optional |
shape | 'round' | 'square' | 'round' | optional |
initials | string | - | optional |
src | string | - | optional |
alt | string | '' | optional |
icon | ReactNode | - | optional |
statusDot | boolean | false | optional |
background | boolean | true | optional |
border | boolean | true | optional |
Avatar displaying a user profile photo.
Loading demo: avatar-image
Avatar showing user initials when no photo is available.
Loading demo: avatar-initials
Avatar with a generic person icon as a fallback.
Loading demo: avatar-icon
Avatars are available in sm, md, lg and xl sizes.
Loading demo: avatar-sizes
Choose between Circular and Rounded square shapes.
Loading demo: avatar-shape