Skip to content

Overview

The Avatar component displays a user's profile image, auto-generated initials, or a fallback icon. It supports multiple sizes, rounded styles, a status indicator (online, offline, busy), and automatic color assignment based on the user's name.

Use avatars for:

  • User profile pictures
  • Comment/message author indicators
  • Team member lists
  • Navigation bars and sidebars

Basic Usage

Jane Doe 
<x-aura::avatar src="/images/avatars/alice.jpg" alt="Jane Doe" />

Props

Prop Type Default Description
src string|null null Image URL. When set, renders an <img> tag
name string|null null Full name for auto-generating initials and color
initials string|null null Explicit initials (overrides auto-generation from name)
alt string '' Alt text for the image
size string 'md' Size: xs, sm, md, lg, xl
color string|null null Background color for initials avatar. Auto-assigned from name when null
status string|null null Status indicator: online, offline, busy
rounded string 'full' Border radius: full (circle), lg, md, sm, none

Available auto-colors: primary, success, warning, danger, info, purple, pink, teal, orange, indigo.

Variants/Examples

Image Avatar with Status

Jane Doe 
<x-aura::avatar
    src="/images/avatars/jane.jpg"
    alt="Jane Doe"
    size="lg"
    status="online"
/>

Initials from Name

The component auto-generates initials from the name prop. For two-word names it takes the first letter of each word; for single names it takes the first two letters.

JD 
<x-aura::avatar name="Jane Doe" size="md" />
{{-- Renders "JD" with a consistent background color --}}

Explicit Initials and Color

AB 
<x-aura::avatar initials="AB" color="purple" size="lg" />

Fallback Icon (No Image or Name)

When neither src nor name/initials is provided, a generic user icon is displayed.

<x-aura::avatar size="md" />

Different Sizes

AL
AL
AL
AL
AL 
<x-aura::avatar name="Alice" size="xs" />
<x-aura::avatar name="Alice" size="sm" />
<x-aura::avatar name="Alice" size="md" />
<x-aura::avatar name="Alice" size="lg" />
<x-aura::avatar name="Alice" size="xl" />

Rounded Variants

BO
BO
BO 
<x-aura::avatar name="Bob" rounded="full" />  {{-- Circle (default) --}}
<x-aura::avatar name="Bob" rounded="lg" />    {{-- Large border radius --}}
<x-aura::avatar name="Bob" rounded="none" />  {{-- Square --}}

Sub-components

Avatar Group

Use <x-aura::avatar.group> to stack multiple avatars with overlapping layout.

AS
BJ
CW
+5 
<x-aura::avatar.group>
    <x-aura::avatar name="Alice Smith" size="md" />
    <x-aura::avatar name="Bob Jones" size="md" />
    <x-aura::avatar name="Carol White" size="md" />
    <x-aura::avatar initials="+5" size="md" color="info" />
</x-aura::avatar.group>

Slots

The Avatar component does not use named slots. All content is driven by props.

Accessibility

  • When src is set, the <img> tag includes alt text (falls back to name if alt is empty).
  • Initials are rendered as a <span> which is visible to screen readers.
  • The status indicator is purely visual (a colored dot). For screen reader support, add aria-label via attributes:
JA 
<x-aura::avatar name="Jane" status="online" aria-label="Jane Doe (online)" />
  • Color assignments are deterministic per name, providing a consistent visual identity.