Avatar Display photo of a user, or their initials, on a background
Design guidance When and how to use this Use a Avatar to show a representation of a user. If an image is provided, it
will show that image, otherwise it will try and parse the user's initials from
the name you provide. If you don't provide anything it shows a user icon
Attribute Usage Size we support sm, md, and lg avatars
React Avatar composes
Chakra's Avatar component
States These states are implicit based on the information provided
<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Avatar name="Sage" src="/images/kitten--1920-1080.jpg" />
<Avatar name="Sage Michaelson" />
Size There are three sizes
<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Avatar size="sm" src="/images/kitten--1920-1080.jpg" />
<Avatar size="md" src="/images/kitten--1920-1080.jpg" />
<Avatar size="lg" src="/images/kitten--1920-1080.jpg" />
Grouped <Stack direction="row" spacing="300" alignItems="center" pl="200">
<Avatar name="Lenny Bruce" />
<Avatar name="Lester Bangs" />
<Avatar name="Leonard B" />