Catalog Avatars

<.avatar>

ConnieUI.Avatars

HEEx

<ConnieUI.Avatars.avatar name="Sofie Lindqvist" image="/pg/avatars/sofie-lindqvist.jpg" />

Variant matrix

Every combination of one or two attributes, side by side.

Controls

name

:string

image *

:string

size

:string

status

:string

`online` puts a green presence dot on the avatar's bottom-right edge

tooltip

names the person on hover and to a screen reader. Off where their name is already written beside the avatar, which then is decoration, though it still wears their initials

Set by the example

class

Docs

No @doc for this component.

Attribute	Type	Default	Description
No data found.
name	:string
image *	:string
size	:string	"size-10"
class	:any	nil
status	:string	nil	`online` puts a green presence dot on the avatar's bottom-right edge nil \| online
tooltip	:boolean	true	names the person on hover and to a screen reader. Off where their name is already written beside the avatar, which then is decoration, though it still wears their initials