Polished profile energy
The avatar component wraps profile photos, initials, or custom content inside luminous gradient rims and animated presence pips. Drop them into dashboards, rosters, or messaging interfaces for instant polish.
Luminous line-up
Each avatar chooses a gradient halo based on the user identity and adds subtle hover lift. Presence pulses animate in place without feeling noisy.
<.avatar src="https://..." name="Ava Stone" size={:lg} online={true} />
<.avatar name="Evelyn Wu" />
<.avatar name="Jo" size={:sm} />
Size typography
Five sizes cover everything from condensed list rows to hero headers. Initials inherit perfect type scale per size.
Presence states
Online and offline chips glow with a soft pulse and sit flush at any size. Skip the indicator with online=.
Custom content & fallback
Pipe any LiveView content into the slot. Emoji, icons, or counters inherit the glass shell and gradient frame instantly.
<.avatar size={:lg}>
<.icon name="hero-sparkles" class="h-8 w-8 text-white/90" />
</.avatar>
Props
Avatars are pure components—no extra CSS required. Bring your own classes to override padding, add tooltips, or wire into menus.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | nil | nil | Photo URL. When present, renders an image with soft hover zoom. |
| name | string | nil | nil | Used to compute initials and gradient palette. |
| size | :xs | :sm | :md | :lg | :xl | :md | Controls shell diameter and typography scale. |
| online | boolean | nil | nil |
true
shows a green pulse, false
shows a rose tone, nil
hides the indicator.
|
| class | string | "" | Extend with inline flexbox tweaks, tooltips, or data attributes. |
| inner_block | slot | — | Optional custom content. Ideal for icons, emojis, or dynamic counters. |