Avatar

User profile images and fallback initial badges with online status indicators and rounded or square shapes.

Component Syntax

blade

<x-aura::avatar src="https://..." initials="JD" size="md" status="online" />

1. Photo Avatar Sizes

blade

<x-aura::avatar src="https://..." size="xs" />
<x-aura::avatar src="https://..." size="sm" />
<x-aura::avatar src="https://..." size="md" />
<x-aura::avatar src="https://..." size="lg" />
<x-aura::avatar src="https://..." size="xl" />

2. Initials Fallback Badges

blade

AW

JD

SC

MV

UN

<x-aura::avatar initials="AW" size="xs" />
<x-aura::avatar initials="JD" size="sm" />
<x-aura::avatar initials="SC" size="md" />
<x-aura::avatar initials="MV" size="lg" />
<x-aura::avatar initials="UN" size="xl" />

3. Square Shaped Avatars

blade

SQ

AP

<x-aura::avatar initials="SQ" size="sm" :square="true" />
<x-aura::avatar initials="AP" size="md" :square="true" />
<x-aura::avatar src="https://..." size="lg" :square="true" />
<x-aura::avatar src="https://..." size="xl" :square="true" />

4. Presence Status Indicators

blade

XS

SM

MD

LG

XL

<x-aura::avatar initials="XS" size="xs" status="online" />
<x-aura::avatar initials="SM" size="sm" status="busy" />
<x-aura::avatar initials="MD" size="md" status="away" />
<x-aura::avatar initials="LG" size="lg" status="offline" />
<x-aura::avatar initials="XL" size="xl" status="online" />

Component Props

Available properties and configurations for the avatar component.

Prop	Default	Available Values
src	null	Image URL string
initials	null	Initials string (e.g. JD, AW)
size	md	xs sm md lg xl
square	false	true false
status	null	online busy away offline

Aura Wire

Component Library

Avatar

Component Syntax

1. Photo Avatar Sizes

2. Initials Fallback Badges

3. Square Shaped Avatars

4. Presence Status Indicators

Component Props

Accordion

Badge

Aura Wire