Avatar
The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Import
import { Avatar } from "@recastui/react";
Usage
Editable Example
<div className="flex space-x-5 direction-row">{/* Default placeholder */}<Avatar />{/* With Image */}<Avatar src='/images/nicolas-horn.jpg' name='Nicolas Horn'/>{/* With name initials */}<Avatar name='Nicolas Horn'/></div>
Variants
The Avatar component has 3 variants namely filled, outline & subtle. Default is filled
Editable Example
<div className="flex space-x-5 direction-row">{/* Default */}<Avatar variant='filled' name='John Doe' /><Avatar variant='outline' name='John Doe' /><Avatar variant='subtle' /></div>
Rounded
Use the rounded prop add roundedness to the Avatar component. There are 5 rounded options: none, sm, md, lg, full. Default is none
Editable Example
<div className="flex space-x-5 direction-row"><Avatar src='/images/aiony-haust.jpeg' name='Avatar' rounded='none' /><Avatar src='/images/nicolas-horn.jpg' name='Avatar' rounded='sm' /><Avatar src='/images/luis-villasmil.jpeg' name='Avatar' rounded='md' /><Avatar src='/images/minh-pham.jpeg' name='Avatar' rounded='lg' /><Avatar src='/images/peyman-farmani.jpeg' name='Avatar' rounded='full' /></div>
Size
Use the size prop to change the size of the Avatar component. There are 7 size options: xxs, xs, sm, md, lg, xl & xxl. Default is md
Editable Example
<div className="flex space-x-5 direction-row"><Avatar size='xxs' src='/images/aiony-haust.jpeg' name='Avatar' rounded='full' /><Avatar size='xs' src='/images/nicolas-horn.jpg' name='Avatar' rounded='full' /><Avatar size='sm' src='/images/luis-villasmil.jpeg' name='Avatar' rounded='full' /><Avatar size='md' src='/images/minh-pham.jpeg' name='Avatar' rounded='full' /><Avatar size='lg' src='/images/peyman-farmani.jpeg' name='Avatar' rounded='full' /><Avatar size='xl' src='/images/aiony-haust.jpeg' name='Avatar' rounded='full' /><Avatar size='xxl' src='/images/leio-mclaren.jpeg' name='Avatar' rounded='full' /></div>
Color
Editable Example
<div><div className="space-y-2">Stateful colors:</div><div className="grid gap-2 grid-cols-3 lg:grid-cols-5 mb-2"><Avatar color='error' variant='subtle' name='John Doe' rounded='full' /><Avatar color='info' variant='subtle' name='John Doe' rounded='full' /><Avatar color='success' variant='subtle' name='John Doe' rounded='full' /><Avatar color='warning' variant='subtle' name='John Doe' rounded='full' /></div><div className="space-y-2">All other colors:</div><div className="grid gap-2 grid-cols-3 lg:grid-cols-5"><Avatar color='tomato' variant='subtle' name='John Doe' rounded='full' /><Avatar color='red' variant='subtle' name='John Doe' rounded='full' /><Avatar color='crimson' variant='subtle' name='John Doe' rounded='full' /><Avatar color='pink' variant='subtle' name='John Doe' rounded='full' /><Avatar color='plum' variant='subtle' name='John Doe' rounded='full' /><Avatar color='purple' variant='subtle' name='John Doe' rounded='full' /><Avatar color='violet' variant='subtle' name='John Doe' rounded='full' /><Avatar color='indigo' variant='subtle' name='John Doe' rounded='full' /><Avatar color='blue' variant='subtle' name='John Doe' rounded='full' /><Avatar color='cyan' variant='subtle' name='John Doe' rounded='full' /><Avatar color='teal' variant='subtle' name='John Doe' rounded='full' /><Avatar color='green' variant='subtle' name='John Doe' rounded='full' /><Avatar color='grass' variant='subtle' name='John Doe' rounded='full' /><Avatar color='orange' variant='subtle' name='John Doe' rounded='full' /><Avatar color='brown' variant='subtle' name='John Doe' rounded='full' /><Avatar color='sky' variant='subtle' name='John Doe' rounded='full' /><Avatar color='mint' variant='subtle' name='John Doe' rounded='full' /><Avatar color='yellow' variant='subtle' name='John Doe' rounded='full' /><Avatar color='amber' variant='subtle' name='John Doe' rounded='full' /><Avatar color='gold' variant='subtle' name='John Doe' rounded='full' /><Avatar color='bronze' variant='subtle' name='John Doe' rounded='full' /></div></div>