Basic Usage

<x-avatar name="John Doe" />

Props

• src - string|null (image URL)
• alt - string|null (alt text for image)
• name - string|null (name for generating initials)
• size - string (default: 'md', alternatives: 'sm', 'lg', 'xl')
• shape - string (default: 'circle', alternative: 'square')
• status - string|null (default: null, alternatives: 'online', 'offline', 'away')
• icon - string|null (fallback icon name, e.g., 'user', 'envelope')

Examples

<!-- Basic with name -->
<x-avatar name="John Doe" />

<!-- With image -->
<x-avatar src="https://example.com/avatar.jpg" name="John Doe" />

<!-- Sizes -->
<x-avatar name="John Doe" size="sm" />
<x-avatar name="John Doe" size="md" />
<x-avatar name="John Doe" size="lg" />
<x-avatar name="John Doe" size="xl" />

<!-- Shapes -->
<x-avatar name="John Doe" shape="circle" />
<x-avatar name="John Doe" shape="square" />

<!-- With status -->
<x-avatar name="John Doe" status="online" />
<x-avatar name="Jane Smith" status="offline" />
<x-avatar name="Bob" status="away" />

<!-- With icon -->
<x-avatar icon="user" />
<x-avatar icon="envelope" />

Initials Generation

If a name is provided, the component automatically generates initials:

• Two words: "John Doe" → "JD"
• Single word: "Bob" → "BO"

Fallback Behavior

The component follows this priority for display:

1. Image (if src is provided and loads successfully)
2. Icon (if icon is provided)
3. Initials (if name is provided)
4. Default user icon