Avatar

Examples

Default

An image element with a fallback for representing users.

F

<%= render "ui/avatar" do %>
  <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "@fernandes" %>
  <%= render "ui/avatar/fallback" do %>F<% end %>
<% end %>

F

<%= render UI::Avatar.new do %>
  <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
  <%= render UI::AvatarFallback.new { "F" } %>
<% end %>

F

<%= render UI::AvatarComponent.new do %>
  <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
  <%= render(UI::AvatarFallbackComponent.new) { "F" } %>
<% end %>

Rounded Square

Avatar with rounded-lg class for a softer square shape.

F

<%= render "ui/avatar", classes: "rounded-lg" do %>
  <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "@fernandes" %>
  <%= render "ui/avatar/fallback", classes: "rounded-lg" do %>F<% end %>
<% end %>

F

<%= render UI::Avatar.new(classes: "rounded-lg") do %>
  <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
  <%= render UI::AvatarFallback.new(classes: "rounded-lg") { "F" } %>
<% end %>

F

<%= render UI::AvatarComponent.new(classes: "rounded-lg") do %>
  <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "@fernandes") %>
  <%= render(UI::AvatarFallbackComponent.new(classes: "rounded-lg")) { "F" } %>
<% end %>

Avatar Group

Stack multiple avatars with overlapping effect.

U1 U2 U3 U4

<div class="flex -space-x-2">
  <% (1..4).each do |i| %>
    <%= render "ui/avatar", classes: "ring-2 ring-background" do %>
      <%= render "ui/avatar/image", src: "https://i.pravatar.cc/150?img=#{i}", alt: "User #{i}" %>
      <%= render "ui/avatar/fallback" do %>U<%= i %><% end %>
    <% end %>
  <% end %>
</div>

U1 U2 U3 U4

<div class="flex -space-x-2">
  <% (1..4).each do |i| %>
    <%= render UI::Avatar.new(classes: "ring-2 ring-background") do %>
      <%= render UI::AvatarImage.new(src: "https://i.pravatar.cc/150?img=#{i}", alt: "User #{i}") %>
      <%= render UI::AvatarFallback.new { "U#{i}" } %>
    <% end %>
  <% end %>
</div>

U1 U2 U3 U4

<div class="flex -space-x-2">
  <% (1..4).each do |i| %>
    <%= render UI::AvatarComponent.new(classes: "ring-2 ring-background") do %>
      <%= render UI::AvatarImageComponent.new(src: "https://i.pravatar.cc/150?img=#{i}", alt: "User #{i}") %>
      <%= render(UI::AvatarFallbackComponent.new) { "U#{i}" } %>
    <% end %>
  <% end %>
</div>

With Status Indicator

Avatar with online, away, or offline status indicators.

F

<div class="flex items-center gap-4">
  <div class="relative">
    <%= render "ui/avatar" do %>
      <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "Online user" %>
      <%= render "ui/avatar/fallback" do %>F<% end %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-green-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render "ui/avatar" do %>
      <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "Away user" %>
      <%= render "ui/avatar/fallback" do %>F<% end %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-yellow-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render "ui/avatar" do %>
      <%= render "ui/avatar/image", src: "https://github.com/fernandes.png", alt: "Offline user" %>
      <%= render "ui/avatar/fallback" do %>F<% end %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-muted ring-2 ring-background"></span>
  </div>
</div>

F

<div class="flex items-center gap-4">
  <div class="relative">
    <%= render UI::Avatar.new do %>
      <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "Online user") %>
      <%= render UI::AvatarFallback.new { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-green-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render UI::Avatar.new do %>
      <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "Away user") %>
      <%= render UI::AvatarFallback.new { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-yellow-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render UI::Avatar.new do %>
      <%= render UI::AvatarImage.new(src: "https://github.com/fernandes.png", alt: "Offline user") %>
      <%= render UI::AvatarFallback.new { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-muted ring-2 ring-background"></span>
  </div>
</div>

F

<div class="flex items-center gap-4">
  <div class="relative">
    <%= render UI::AvatarComponent.new do %>
      <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "Online user") %>
      <%= render(UI::AvatarFallbackComponent.new) { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-green-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render UI::AvatarComponent.new do %>
      <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "Away user") %>
      <%= render(UI::AvatarFallbackComponent.new) { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-yellow-500 ring-2 ring-background"></span>
  </div>
  <div class="relative">
    <%= render UI::AvatarComponent.new do %>
      <%= render UI::AvatarImageComponent.new(src: "https://github.com/fernandes.png", alt: "Offline user") %>
      <%= render(UI::AvatarFallbackComponent.new) { "F" } %>
    <% end %>
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-muted ring-2 ring-background"></span>
  </div>
</div>

Features

Custom styling with Tailwind classes

API Reference

Displays an image element with a fallback for representing users.

Fallback

Displays fallback content when the image hasn't loaded or fails to load.

Image

Displays the avatar image. Only renders when it has loaded successfully.

Parameters

Name	Type	Default	Description
alt	String		The alt

JavaScript

Stimulus Controller

ui--avatar

Actions

onImageLoadonImageErrorshowImagehideImagehideFallbackshowFallback