Avatar

The Mishka Chelekom Avatar component allows you to display user profile images, initials, or a fallback icon when no image is available. It's a versatile component that adapts to various user data inputs, ensuring that each profile is represented visually in a consistent and elegant manner. For group displays, the Avatar Group component arranges multiple avatars in a compact, visually appealing layout, making it perfect for team views or social interactions within your application. This module integrates seamlessly with Phoenix and Phoenix LiveView.

Overview of the Phoenix and LiveView Avatar Component

LTR RTL

Preview

SB

+20

25 people Signed up

Show the whole example Show less

This Phoenix LiveView component offers a variety of options to customize your user avatars. You can stack avatars on top of each other as a group, add borders for emphasis, include status indicators, and much more. These features make the avatar component highly flexible, allowing it to fit seamlessly into any design while enhancing the visual representation of user profiles.

The color attribute in the avatar component defines the theme and appearance of the avatar by offering a wide range of color options. You can choose from predefined color values such as base, natural, white, dark, primary, secondary, success, warning, danger, info, misc, dawn, and silver. The default color is transparent, which draws no background, so an avatar of initials or an icon needs a color to look like an avatar. The examples on this page use silver for that.

Avatar colors

LTR RTL

Preview

SB

MD

Fh

GT

Wh

DA

GT

SE

DB

MD

LG

JL

Show the whole example Show less

<.avatar color="base"><:icon name="hero-star" /></.avatar>

<.avatar color="natural"><:icon name="hero-star" /></.avatar>

<.avatar border="extra_small" src="/path/to/image" />

<.avatar color="natural">SB</.avatar>
<.avatar color="white">SB</.avatar>
<.avatar color="dark">SB</.avatar>
<.avatar color="primary">SB</.avatar>
<.avatar color="secondary">SB</.avatar>
<.avatar color="warning">SB</.avatar>
<.avatar color="misc">SB</.avatar>
<.avatar color="dawn">SB</.avatar>
<.avatar color="success">SB</.avatar>
<.avatar color="danger">SB</.avatar>
<.avatar color="info">SB</.avatar>
<.avatar color="silver">SB</.avatar>

By using the src prop and specifying the path to your image, you can easily display any desired image within the Mishka Chelekom Avatar component.

How to display images

LTR RTL

Preview

Show the whole example Show less

<.avatar alt="alt text of image" color="dawn" src="/path/to/image" />

An avatar with a src draws an img, and the standard image attributes you write on the avatar are passed to it: alt, srcset, sizes, width, height, loading, decoding, fetchpriority and referrerpolicy. Set alt every time. Describe the person when the picture stands alone, and write alt="" when the name is already printed next to it, so screen readers do not read it twice. An avatar with no src draws a div, where these attributes do nothing.

Image attributes

LTR RTL

Preview

Mona Aghili

Show the whole example Show less

<.avatar
  src="/path/to/image"
  alt="Mona Aghili"
  rounded="full"
  loading="lazy"
  decoding="async"
/>

<%!-- the name is printed next to the picture, so the picture is decorative --%>
<div class="flex items-center gap-2">
  <.avatar src="/path/to/image" alt="" rounded="full" />
  <span>Mona Aghili</span>
</div>

<.avatar
  src="/path/to/image"
  alt="Mona Aghili"
  srcset="/path/to/image-2x 2x"
  sizes="48px"
  width="48"
  height="48"
  fetchpriority="low"
  referrerpolicy="no-referrer"
/>

By using the icon prop and selecting any Hero icon, you can display icons within the Mishka Chelekom Avatar component, providing a customizable alternative to images.

<.avatar color="silver">
  <:icon name="hero-star" />
</.avatar>

The Mishka Chelekom Avatar component supports displaying user initials when no image is provided. This ensures a consistent and personalized representation for each user, offering a fallback option that maintains the visual structure of the interface.

<.avatar color="silver">
  IN
</.avatar>

The size prop in the Mishka Chelekom Avatar component allows you to control the avatar’s dimensions. You can choose from predefined sizes, such as extra_small, small, medium, large, and extra_large, ensuring that the avatar fits seamlessly into your design. , you can also apply your own custom class or Tailwind CSS class to add custom sizes to the avatar.

Size prop in Phoenix Liveview component

LTR RTL

Preview

TG

Show the whole example Show less

<.avatar size="extra_small" color="silver">
  TG
</.avatar>

<.avatar size="small" src="path/to/image" />

<.avatar size="medium" src="path/to/image" />

<.avatar size="large">
  <:icon name="hero-users" color="dawn" />
</.avatar>

<.avatar size="extra_large">
  <:icon name="hero-star" color="misc" />
</.avatar>

The border prop in the Mishka Chelekom Avatar component allows you to control the avatar’s border size. You can choose from predefined values, such as extra_small, small, medium, large, and extra_large, you can also apply your own custom class or Tailwind CSS class to add custom border effects to the avatar.

Border prop in Phoenix Liveview component

LTR RTL

Preview

TG

JJ

Show the whole example Show less

<.avatar border="extra_small">
  TG
</.avatar>

<.avatar border="small" src="path/to/image" />

<.avatar border="medium" >
  JJ
</.avatar>

<.avatar border="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar border="extra_large">
  <:icon name="hero-heart" />
</.avatar>

The Rounded prop in the Mishka Chelekom Avatar component allows you to control the avatar’s Rounded size. You can choose from predefined values, such as extra_small, small, medium, large, extra_large, full, and none. , you can also apply your own custom class or Tailwind CSS class to add custom border radius effects to the avatar.

Rounded prop in Phoenix Liveview component

LTR RTL

Preview

TG

JJ

Show the whole example Show less

<.avatar rounded="extra_small" color="silver">
  TG
</.avatar>

<.avatar rounded="small" src="path/to/image" />

<.avatar rounded="medium" >
  JJ
</.avatar>

<.avatar rounded="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar rounded="extra_large">
  <:icon name="hero-heart" />
</.avatar>

The shadow prop in the Mishka Chelekom Avatar component allows you to control the avatar’s shadow size. You can choose from predefined values, such as extra_small, small, medium, large, extra_large, and none. By using the shadow prop, you can also apply your own custom class or Tailwind CSS class to add custom shadow effects to the avatar.

Shadow prop in Phoenix Liveview component

LTR RTL

Preview

TG

JJ

Show the whole example Show less

<.avatar shadow="extra_small" color="silver">
  TG
</.avatar>

<.avatar shadow="small" src="path/to/image" />

<.avatar shadow="medium" >
  JJ
</.avatar>

<.avatar shadow="large">
  <:icon name="hero-photo" />
</.avatar>

<.avatar shadow="extra_large">
  <:icon name="hero-heart" />
</.avatar>

You can easily using indicator component to the Mishka Chelekom Avatar component to visually represent status or notifications. By including the indicator tag within the avatar, you can customize the size, color, and position of the indicator. For example, using the top_left attribute places the indicator in the top-left corner of the avatar. This feature allows for a more dynamic user experience, such as showing online statuses, notifications, or alerts alongside profile images or icons. By using the pinging prop on the indicator, you can add a pinging animation to the avatar, making it more dynamic and visually engaging.

Display indicator on avatars

LTR RTL

Preview

TG

Show the whole example Show less

<.avatar>
  <:icon name="hero-users" />
  <.indicator size="small" color="danger" top_left />
</.avatar>

<.avatar>
  TG
  <.indicator size="small" color="misc" bottom_left />
</.avatar>

<.avatar src="/path/to/image">
  <:icon name="hero-heart" />
  <.indicator size="small" color="success" top_right pinging />
</.avatar>

The avatar_group component in the Mishka Chelekom library allows you to display multiple avatars together in a compact, visually cohesive layout. This feature is ideal for representing teams, group members, or social interactions. Additionally, you can add a placeholder, like +20, using the avatar tag to represent additional members in the group when space is limited.

Avatar group

LTR RTL

Preview

+20

Show the whole example Show less

<.avatar_group>
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar
    src="/path/to/image"
    size="large"
    border="extra_small"
    color="misc"
    rounded="full"
  />
  <.avatar size="large" color="base" rounded="full" border="medium">
    +20
  </.avatar>
</.avatar_group>

The space attribute in the Mishka Chelekom Avatar Group component has the following size options: extra_small, small, medium, large, extra_large, and none.

Space prop Avatar group

LTR RTL

Preview

+20

+20

+20

+20

+20

Show the whole example Show less

<.avatar_group space="extra_small">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar color="base">+20</.avatar>
</.avatar_group>

<.avatar_group space="small">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar color="base">+20</.avatar>
</.avatar_group>

<.avatar_group space="medium">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar color="base">+20</.avatar>
</.avatar_group>

<.avatar_group space="large">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar color="base">+20</.avatar>
</.avatar_group>

<.avatar_group space="extra_large">
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar src="/path/to/image"/>
  <.avatar color="base">+20</.avatar>
</.avatar_group>