Dottiv1.1
← Components

Avatar

Component

User profile representation with initials, images, and fallbacks.

Installation & Usage

Basic Usage
import { Avatar } from 'dotti'

<Avatar 
  initials="JD"
  size="lg"
  variant="circle"
/>

Examples

Avatar Variants

Different avatar styles and sizes.

SM
MD
LG
XL
Code
<Avatar size="sm" initials="SM" />
<Avatar size="md" initials="MD" />
<Avatar size="lg" initials="LG" />
<Avatar size="xl" initials="XL" />

Avatar Shapes

Circle and square avatar variants.

JD
JS
Code
<Avatar initials="JD" variant="circle" />
<Avatar initials="JS" variant="square" />

Props