Avatar
Avatar component for building consistent, accessible interfaces.
Loading preview…
1
'use client';2
3
import { Avatar } from 'sdaia-ui';4
5
const IMG = '/svgs/SaudiAvatar.svg';Installation
npx sdaia-ui@latest add avatar
Usage
import { Avatar } from "@/components/ui/avatar"<Avatar size="sm" type="initials" initials="AB" statusDot />Examples
Image
Avatar displaying a user profile photo.
Loading preview…
1
<Avatar size="md" type="image" src="https://your-cdn.example/user.jpg" alt="User avatar" statusDot />Initials
Avatar showing user initials when no photo is available.
Loading preview…
1
<Avatar size="md" type="initials" initials="AB" statusDot />Icon
Avatar with a generic person icon as a fallback.
Loading preview…
1
<Avatar size="md" type="icon" statusDot />Sizes
Avatars are available in sm, md, lg and xl sizes.
Loading preview…
1
<Avatar size="sm" type="initials" initials="AB" />2
<Avatar size="md" type="initials" initials="AB" />3
<Avatar size="lg" type="initials" initials="AB" />4
<Avatar size="xl" type="initials" initials="AB" />Shape
Choose between Circular and Rounded square shapes.
Loading preview…
1
<Avatar size="md" type="initials" shape="round" initials="AB" />2
<Avatar size="md" type="initials" shape="square" initials="AB" />API Reference
AvatarProps
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 |
