Beacon.LiveAdmin.StationUI.HTML.Avatar (Beacon LiveAdmin v0.4.0)
View SourceThe avatar component renders initials, an SVG, or an image thumbnail to represent a user. Avatars can be displayed as single items or combined into a horizontal stack.
Sets up an avatar stack.
Stack Example
<.avatar_stack overflow_link={~p"/avatars/link"} display_max={2}>
<:avatar>
<.avatar .../>
</:avatar>
<:avatar>
<.avatar .../>
</:avatar>
<:avatar>
<.avatar .../>
</:avatar>
<:avatar>
<.avatar .../>
</:avatar>
<.avatar_stack>
Summary
Functions
Attributes
status
(:string
) - Must be one of"active"
,"inactive"
,"deactivated"
, or"pending"
.variant
(:string
) - Must be one of"image"
,"initials"
, or"placeholder"
.index
(:integer
)name
(:string
) - Defaults tonil
.image_src
(:string
) - Defaults to""
.class
(:any
) - Defaults to"h-[42px] w-[42px] [&_svg]:w-[21px] border-transparent"
.
Slots
initials
- Accepts attributes:count
(:boolean
)
placeholder
Attributes
status
(:string
) - Must be one of"active"
,"inactive"
,"deactivated"
, or"pending"
.variant
(:string
) - Must be one of"image"
,"initials"
, or"placeholder"
.index
(:integer
)name
(:string
) - Defaults tonil
.image_src
(:string
) - Defaults tonil
.to
(:string
) (required)link_class
(:any
) - Defaults to"focus-visible:ring-2 active:ring-1"
.class
(:any
) - Defaults tonil
.
Slots
initials
- Accepts attributes:count
(:boolean
)
placeholder
Attributes
class
(:any
) - Defaults to"[&_div]:ml-1.5 [&_div_figure]:-ml-3.5"
.display_max
(:integer
) - Defaults to3
.total_count
(:integer
) - Defaults tonil
.overflow_link
(:string
) (required)
Slots
avatar
An avatar-specific status icon.
The default placeholder icon for a placeholder variant of an avatar.
A single avatar
An avatar that links somewhere.
Functions
Attributes
status
(:string
) - Must be one of"active"
,"inactive"
,"deactivated"
, or"pending"
.variant
(:string
) - Must be one of"image"
,"initials"
, or"placeholder"
.index
(:integer
)name
(:string
) - Defaults tonil
.image_src
(:string
) - Defaults to""
.class
(:any
) - Defaults to"h-[42px] w-[42px] [&_svg]:w-[21px] border-transparent"
.
Slots
initials
- Accepts attributes:count
(:boolean
)
placeholder
Attributes
status
(:string
) - Must be one of"active"
,"inactive"
,"deactivated"
, or"pending"
.variant
(:string
) - Must be one of"image"
,"initials"
, or"placeholder"
.index
(:integer
)name
(:string
) - Defaults tonil
.image_src
(:string
) - Defaults tonil
.to
(:string
) (required)link_class
(:any
) - Defaults to"focus-visible:ring-2 active:ring-1"
.class
(:any
) - Defaults tonil
.
Slots
initials
- Accepts attributes:count
(:boolean
)
placeholder
Attributes
class
(:any
) - Defaults to"[&_div]:ml-1.5 [&_div_figure]:-ml-3.5"
.display_max
(:integer
) - Defaults to3
.total_count
(:integer
) - Defaults tonil
.overflow_link
(:string
) (required)
Slots
avatar
An avatar-specific status icon.
Attributes
status
(:string
) (required) - Must be one of"active"
,"inactive"
,"deactivated"
, or"pending"
.class
(:any
) - additional or overriding classes. Defaults tonil
.
The default placeholder icon for a placeholder variant of an avatar.
Attributes
name
(:string
) - Defaults tonil
.
A single avatar
Examples
Avatar with initials, a border, and an active status icon:
<.avatar variant="initials" status="active" class="h-[42px] w-[42px] border-[--sui-brand-primary]" />
Avatar with placeholder image with a pending status icon:
<.avatar variant="placeholder" status="pending" />
Suggested classes for various sizes:
- xs -> "h-6 w-6 [&_svg]:w-3 text-xs"
- sm -> "h-8 w-8 [&_svg]:w-4 text-sm"
- md -> "h-[42px] w-[42px] [&_svg]:w-[21px]" (default)
- lg -> "h-[52px] w-[52px] [&_svg]:w-[26px] text-lg"
- xl -> "h-16 w-16 [&_svg]:w-8 text-lg"
An avatar that links somewhere.
Example
<.avatar_link to={~p"/some/link"} variant="placeholder" />