Avatar

<flux:avatar src="https://picsum.photos/seed/user/64/64" />

Initials

Pass initials directly, or pass a name and Flux derives the initials from it. Persian names work as-is — the letters render in the page's font-sans, the same face as the rest of the page.

MM

SR

مم

<flux:avatar initials="MM" />
<flux:avatar name="Sara Rezaei" />
<flux:avatar initials="مم" />

Colors

A fixed color, or color="auto" to derive one from the name so the same person always gets the same color.

SR

MM

AB

CD

<flux:avatar name="Sara Rezaei" color="auto" />
<flux:avatar initials="MM" color="blue" />
<flux:avatar initials="AB" color="rose" />
<flux:avatar initials="CD" color="green" />

Sizes

XS

SM

MD

LG

XL

<flux:avatar size="xs" initials="XS" />
<flux:avatar size="sm" initials="SM" />
<flux:avatar initials="MD" />
<flux:avatar size="lg" initials="LG" />
<flux:avatar size="xl" initials="XL" />

Circle

MM

<flux:avatar circle src="https://picsum.photos/seed/user/64/64" />
<flux:avatar circle initials="MM" color="indigo" />
<flux:avatar circle icon="user" />

Badge

A presence dot, a count, or any content in the corner.

MM

AB

<flux:avatar circle badge badge:color="green" badge:circle initials="MM" />
<flux:avatar circle badge="7" badge:color="red" initials="AB" />

Group

Overlap a set of avatars with flux:avatar.group.

3+

<flux:avatar.group>
    <flux:avatar circle src="https://picsum.photos/seed/a1/48/48" />
    <flux:avatar circle src="https://picsum.photos/seed/a2/48/48" />
    <flux:avatar circle src="https://picsum.photos/seed/a3/48/48" />
    <flux:avatar circle initials="3+" />
</flux:avatar.group>

Reference

flux:avatar

Prop	Description
src	Image URL.
initials	Letters shown when there is no image.
name	Full name; initials are derived from it when `initials` is absent.
icon	Icon shown instead of initials (e.g. `user`).
icon:variant	Icon variant. Default: `solid`.
size	Options: `xs`, `sm`, `md`, `lg`, `xl`. Default: `md`.
color	A Tailwind color, or `auto` to derive one from the name.
circle	If `true`, fully rounded instead of a squircle.
badge	Corner badge. `true` for a plain dot, or any content.
tooltip	Tooltip content shown on hover.
href	Renders the avatar as a link.
as	Underlying element. Default: `div`.
alt	Alt text for the image.

flux:avatar.group

Overlaps its child avatars. Takes no props.