Renders an avatar component.

Examples

<.avatar fallback="JD" />
<.avatar src="/path/to/image.jpg" fallback="JD" />
<.avatar size="5" variant="solid" color="indigo" fallback="AB" />
<.avatar fallback="JD" high_contrast={true} />

Props

• src - The image source URL. If the image fails to load, the fallback will be displayed.
• fallback - Required. The fallback content when no image is provided or image fails to load. Can be initials or an icon.
• alt - The alternative text for the image.
• size - Avatar size from 1 to 9. Controls the avatar dimensions. Can be a string or a responsive map.
• variant - Visual variant: "solid" or "soft". Defaults to "soft".
• color - The accent color.
• high_contrast - Whether to increase color contrast with the background.
• radius - Border radius: one of "none", "small", "medium", "large", or "full".
• as_child - Composes the component into its immediate child instead of rendering its own HTML element.
• class - Additional CSS classes to add to the element.
• style - Additional inline styles.
• rest - Additional HTML attributes to add to the element.

Attributes

• as_child (:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults to false.
• radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
• color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
• high_contrast (:boolean) - Whether to increase color contrast with the background.
• m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
• id (:string) - Defaults to nil.
• size (:any) - Avatar size from 1 to 9. Controls the avatar dimensions. Can be "1" or %{xs: "1", sm: "2", md: "3", lg: "4", xl: "5"}. Defaults to "3". Defaults to "3".
• variant (:string) - The visual variant: 'solid' or 'soft'. Defaults to 'soft'. Must be one of "solid", or "soft".
• src (:string) - The image source URL. Defaults to nil.
• alt (:string) - The alternative text for the image. Defaults to "".
• class (:string) - Defaults to nil.
• style (:string) - Defaults to "".
• fallback (:any) - Slot for fallback content for text.
• Global attributes are accepted.

Slots

• fallback_slot - Slot for fallback content, can be initials or an icon.