Documentation Playground
Skip to content
Docs

Avatar

Profile picture, user initials or fallback icon.
A A 
<.flex gap="2">
  <.avatar
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar fallback="A" />
</.flex>

API Reference

This component wraps the Avatar primitive and supports common margin props.

Prop Type Default Description
alt string "" The alternative text for the image.
as_child boolean false Composes the component into its immediate child instead of rendering its own HTML element.
class string nil
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.
fallback any — Slot for fallback content for text.
high_contrast boolean — Whether to increase color contrast with the background.
id string nil
m 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'}`
mr 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'}`
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'}`
radius string — Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
size any "3" 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".
src string nil The image source URL.
style string ""
variant string — The visual variant: 'solid' or 'soft'. Defaults to 'soft'.
alt The alternative text for the image.
Type string Default ""
as_child Composes the component into its immediate child instead of rendering its own HTML element.
Type boolean Default false
class
Type string Default nil
color 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.
Type string Default —
fallback Slot for fallback content for text.
Type any Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
id
Type string Default nil
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
radius Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type string Default —
size 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".
Type any Default "3"
src The image source URL.
Type string Default nil
style
Type string Default ""
variant The visual variant: 'solid' or 'soft'. Defaults to 'soft'.
Type string Default —

Examples

Size

Use the size prop to control the size of the avatar.

A A A A A A A A 
<.flex align="center" gap="4">
  <.avatar
    size="1"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="2"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="3"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="4"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="5"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="6"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="7"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  /><.avatar
    size="8"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />
</.flex>

Variant

Use the variant prop to control the visual style of the avatar.

A A 
<.flex gap="2">
  <.avatar variant="solid" fallback="A" /><.avatar variant="soft" fallback="A" />
</.flex>

Color

Use the color prop to assign a specific accent color.

A A A A 
<.flex gap="2">
  <.avatar variant="solid" color="indigo" fallback="A" /><.avatar
    variant="solid"
    color="cyan"
    fallback="A"
  /><.avatar variant="solid" color="orange" fallback="A" /><.avatar
    variant="solid"
    color="crimson"
    fallback="A"
  />
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

A A A A A A A A A A 
<.grid rows="2" gap="2" display="inline-grid" flow="column">
  <.avatar variant="solid" color="indigo" fallback="A" /><.avatar
    variant="solid"
    color="indigo"
    fallback="A"
    high_contrast
  /><.avatar variant="solid" color="cyan" fallback="A" /><.avatar
    variant="solid"
    color="cyan"
    fallback="A"
    high_contrast
  /><.avatar variant="solid" color="orange" fallback="A" /><.avatar
    variant="solid"
    color="orange"
    fallback="A"
    high_contrast
  /><.avatar variant="solid" color="crimson" fallback="A" /><.avatar
    variant="solid"
    color="crimson"
    fallback="A"
    high_contrast
  /><.avatar variant="solid" color="gray" fallback="A" /><.avatar
    variant="solid"
    color="gray"
    fallback="A"
    high_contrast
  />
</.grid>

Radius

Use the radius prop to assign a specific radius value.

A A A 
<.flex gap="2">
  <.avatar radius="none" fallback="A" /><.avatar radius="large" fallback="A" /><.avatar
    radius="full"
    fallback="A"
  />
</.flex>

Fallback

Use the fallback prop or fallback_slot to modify the rendered fallback element.

A AB 
<.flex gap="2">
  <.avatar fallback="A" /><.avatar fallback="AB" />
  <.avatar>
    <:fallback_slot>
      <.box width="24px" height="24px">
        <svg viewBox="0 0 64 64" fill="currentColor">
          <path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
        </svg>
      </.box>
    </:fallback_slot>
  </.avatar>
</.flex>
← Aspect Ratio Badge →