- 1.5.0

Avatar

Renders profile picture, typically to represent a user.

Read more Read less

Maturity: Developing

Usage

Minimal example with only the src attribute:

<.avatar src="avatar.png" />

Render avatar as a circle:

<.avatar src="avatar.png" circle />

Use a placeholder image in case the avatar is not set:

<.avatar src={@user.avatar_url} placeholder_src="fallback.png" />

Render an text as the placeholder value:

<.avatar src={@user.avatar_url} placeholder_content="A" />
Default
Open in playground
Nora Boston 
<.avatar
  alt="Nora Boston"
  src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
 />
Image fallback
Open in playground 
<.avatar
  alt=""
  src={nil}
  placeholder_src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_2.webp?raw=true"
 />
Text fallback
Open in playground 
<.avatar src={nil} placeholder_content="NB" />
Size
Open in playground
Nora Boston
Nora Boston
Nora Boston
Nora Boston 
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
  <.avatar
    size="small"
    alt="Nora Boston"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
  <.avatar
    size="normal"
    alt="Nora Boston"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
  <.avatar
    size="medium"
    alt="Nora Boston"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
  <.avatar
    size="large"
    alt="Nora Boston"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
</div>
Shape
Open in playground
Nora Boston
Nora Boston 
<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
  <.avatar
    alt="Nora Boston"
    shape={nil}
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
  <.avatar
    alt="Nora Boston"
    shape="circle"
    src="https://github.com/woylie/doggo/blob/main/assets/images/dog_square_1.webp?raw=true"
   />
</div>