SutraUI.Avatar (Sutra UI v0.3.0)

View Source

An image element with a fallback for representing the user.

The avatar component displays user profile images with automatic fallback support. When an image fails to load or is not provided, it can display initials or an icon.

Examples

# Avatar with image and initials fallback
<.avatar src="https://github.com/username.png" alt="Username" initials="UN" />

# Avatar with just initials
<.avatar initials="JD" />

# Avatar with icon fallback
<.avatar src="/avatar.jpg" alt="User">
  <:fallback>
    <!-- Your icon here -->
  </:fallback>
</.avatar>

# Different sizes
<.avatar src="/avatar.jpg" alt="User" size="sm" initials="AB" />
<.avatar src="/avatar.jpg" alt="User" size="lg" initials="CD" />

# Square avatar
<.avatar src="/avatar.jpg" alt="User" shape="square" initials="EF" />

# Avatar group
<div class="avatar-group">
  <.avatar src="https://github.com/user1.png" alt="User 1" initials="U1" />
  <.avatar src="https://github.com/user2.png" alt="User 2" initials="U2" />
  <.avatar src="https://github.com/user3.png" alt="User 3" initials="U3" />
</div>

Summary

Functions

avatar(assigns)

Renders an avatar component.

Functions

avatar(assigns)

Renders an avatar component.

Attributes

  • src (:string) - The image source URL. Defaults to nil.
  • alt (:string) - Alternative text for the image. Defaults to "".
  • initials (:string) - Fallback initials to display (1-2 characters recommended). Defaults to nil.
  • size (:string) - The size of the avatar. Defaults to "md". Must be one of "sm", "md", "lg", or "xl".
  • shape (:string) - The shape of the avatar. Defaults to "circle". Must be one of "circle", or "square".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • fallback - Custom fallback content (icon, text, etc.). If not provided, initials will be used if available.