Avatar

Use Avatar for user identity visuals with image or fallback text.

Quick Preview

Preset Examples

Code

<Avatar src="/team/alex.jpg" alt="Alex" variant="circle" size="sm" />
<Avatar alt="Lukman" fallback="LU" variant="circle" size="md" />
<Avatar alt="Design Team" fallback="DT" variant="rounded" size="lg" />
<Avatar alt="Admin" fallback="AD" variant="square" size="xl" />

Usage

Code

import { Avatar } from "@altech-ui/react"
 
<Avatar src="https://i.pravatar.cc/80?img=12" alt="User" />
<Avatar alt="Lukman" fallback="LU" variant="circle" size="md" />
<Avatar alt="Nina" fallback="NI" variant="square" size="xl" />

Props

src?: string
alt?: string
fallback?: ReactNode
variant?: circle | rounded | square
size?: xs | sm | md | lg | xl
Native div props