Avatar

Renders profile picture, typically to represent a user.

Read more Read less

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" />
A
Attribute Type Documentation Default Value
alt :string Use alt text to identify the individual in an avatar if their name or identifier isn't otherwise provided in adjacent text. In contexts where the user's name or identifying information is already displayed alongside the avatar, use `alt=""` (the default) to avoid redundancy and treat the avatar as a decorative element for screen readers. ""
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
loading :string "lazy"
placeholder_content :any Fallback content to render in case the `src` attribute is `nil`, such as text initials or inline SVG. If `placeholder_src` is set, this attribute is ignored. If neither `placeholder_src` nor `placeholder_text` are set and the `src` is `nil`, no element will be rendered.
placeholder_src :any Fallback image src to use in case the `src` attribute is `nil`. If neither `placeholder_src` nor `placeholder_text` are set and the `src` is `nil`, no element will be rendered.
rest :global Any additional HTML attributes.
shape :string
size :string "normal"
src :any The URL of the avatar image. If `nil`, the component will use the value provided in the placeholder attribute.