Salad UI

Avatar

Renders an avatar container.

Read more Read less

The avatar container is a wrapper that holds the avatar image and fallback content.

Options

  • :class - Additional CSS classes to apply to the avatar container.

Examples

<.avatar>
  <.avatar_image src="/images/profile.jpg" alt="User avatar" />
  <.avatar_fallback>JD</.avatar_fallback>
</.avatar>

<.avatar class="h-16 w-16">...</.avatar>
Avatar image Open in playground
CN 
<.avatar>
<.avatar_image src="https://github.com/shadcn.png" />
<.avatar_fallback class="bg-primary text-white">CN</.avatar_fallback>
</.avatar>
Avatar fallback Open in playground
CN 
<.avatar>
<.avatar_image src="http://example.com/badimage.png" />
<.avatar_fallback class="bg-primary text-white">CN</.avatar_fallback>
</.avatar>