Doggo Storybook 0.9.0

Avatar

Renders profile picture, typically to represent a user.

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
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.