Doggo Storybook 0.10.2

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" />
Attribute Type Documentation Default Value
alt :string

Use alt text to identify the individual in an avatar if their name or

 Read more Read less
""

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.

 Read more Read less
[]

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,

 Read more Read less

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.

 Read more Read less

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

 Read more Read less

provided in the placeholder attribute.