Phara UI
v2.x
Avatar
A visual representation of a user, typically using an image or their initials.
Basic (Initials)
Default avatar showing initials when no image is provided.
JD
JS
Blade
<x-ui::avatar name="John Doe" />
<x-ui::avatar name="Jane Smith" />Image
Using a source image for the avatar.
Blade
<x-ui::avatar src="https://avatar.vercel.sh/john" name="John Doe" />
<x-ui::avatar src="https://avatar.vercel.sh/jane" name="Jane Smith" />Sizes
Different size options from small to extra large.
S
M
L
EL
Blade
<x-ui::avatar size="sm" name="Small" />
<x-ui::avatar size="md" name="Medium" />
<x-ui::avatar size="lg" name="Large" />
<x-ui::avatar size="xl" name="Extra Large" />Shapes
Choose between circle (default) or square shapes.
C
S
Blade
<x-ui::avatar shape="circle" name="Circle" />
<x-ui::avatar shape="square" name="Square" />Status
Add a status indicator to the avatar.
OU
OU
Blade
<x-ui::avatar status="online" name="Online User" />
<x-ui::avatar status="offline" name="Offline User" />