Beacon.LiveAdmin.StationUI.HTML.Avatar (Beacon LiveAdmin v0.4.0)

View Source

The 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 to nil.
  • 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 to nil.
  • image_src (:string) - Defaults to nil.
  • to (:string) (required)
  • link_class (:any) - Defaults to "focus-visible:ring-2 active:ring-1".
  • class (:any) - Defaults to nil.

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 to 3.
  • total_count (:integer) - Defaults to nil.
  • 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

avatar(assigns)

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 to nil.
  • 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

avatar_link(assigns)

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 to nil.
  • image_src (:string) - Defaults to nil.
  • to (:string) (required)
  • link_class (:any) - Defaults to "focus-visible:ring-2 active:ring-1".
  • class (:any) - Defaults to nil.

Slots

  • initials - Accepts attributes:
    • count (:boolean)
  • placeholder

avatar_stack(assigns)

Attributes

  • class (:any) - Defaults to "[&_div]:ml-1.5 [&_div_figure]:-ml-3.5".
  • display_max (:integer) - Defaults to 3.
  • total_count (:integer) - Defaults to nil.
  • overflow_link (:string) (required)

Slots

  • avatar

avatar_status_badge(assigns)

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 to nil.

default_avatar_placeholder_icon(assigns)

The default placeholder icon for a placeholder variant of an avatar.

Attributes

  • name (:string) - Defaults to nil.

figure_base_classes()

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"

stack_base_classes()