Avatar

Used to represent user profile picture or initials

Usage

import { Avatar, AvatarGroup } from "chakra-ui-solid";

<AvatarGroup>
  <Avatar.Root>
    <Avatar.Fallback />
    <Avatar.Image />
  </Avatar.Root>
</AvatarGroup>

Avatar.Image writes two attributes for you, and both are spelled the way the DOM spells them: referrerpolicy="no-referrer" is all lowercase where the React version writes referrerPolicy, and draggable takes the string "false", since an attribute whose value is the boolean false is removed rather than written. That spelling is this library’s throughout, not something Avatar chose.

If you prefer a closed component composition, check out the snippet below.

Examples

Sizes

Use the size prop to change the size of the avatar

Variants

Use the variant prop to change the variant of the avatar

Shape

Use the shape prop to change the shape of the avatar, from rounded to square

Colors

Use the colorPalette prop to change the color of the avatar

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

The palette is written out per row rather than looped over. colorPalette is a style prop, so its value has to be one this library’s build could see: passed as a variable it computes a class with no rule behind it, and the avatar renders with no colour and no error.

Fallback

Render Avatar.Icon as the fallback when the name is not provided or when the image fails to load.

Random Color

Combine the colorPalette prop with some custom logic to dynamically change the color of the avatar

A computed palette is the case the sentence above rules out, so the palettes it picks from have to be declared instead of scanned — staticCss: { css: [{ properties: { colorPalette: palettes } }] } in your Panda config covers every one of them at once.

Ring

Use the outline* props to add a ring around the avatar

Group

Use the Group component to group multiple avatars together

Stacking

When using the AvatarGroup component, you can use the stacking prop to change the stacking order of the avatars

Persona

Here’s an example of how to use the Avatar component to display a user persona.

John Mason

john.mason@example.com

Melissa Jones

melissa.jones@example.com

Badge

Show a badge on the right corner of the avatar by composing the Float and Circle components

Store

An alternative way to access the avatar state and methods is to use the RootProvider component and the createAvatar store hook.

not loaded

The store answers loaded, a boolean, and there is no status member to read — onStatusChange is where the "loaded" / "error" names appear, on the details object it is called with.

Closed Component

Here’s how to setup the Avatar for a closed component composition.

Props

Root

AvatarRootProps
Prop	Default	Type
`borderless`	—	`ConditionalValue<boolean>` Drops the ring an avatar draws around itself when it sits in a row of them.
`id`	—	`string` Seeds every id the machine hands out — the root is `avatar:{id}`, the image `avatar:{id}:image`, the fallback `avatar:{id}:fallback`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves.
`ids`	—	`AvatarElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`onStatusChange`	—	`(details: AvatarStatusChangeDetails) => void` Called when the image finishes loading, or gives up.
`shape`	`'full'`	`ConditionalValue<'square' \| 'rounded' \| 'full' \| PresetVariant<'avatar', 'shape'>>` How far the corners are rounded — `full` is the circle.
`size`	`'md'`	`ConditionalValue<'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| PresetVariant<'avatar', 'size'>>` How big the avatar is, and the type size its initials take with it. `full` takes the size of whatever box it is placed in instead of a scale step.
`variant`	`'subtle'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| PresetVariant<'avatar', 'variant'>>` How the area behind the fallback is filled, for the avatars that have no image.

Plus Omit<HTMLChakraProps<"div">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

RootProvider

AvatarRootProviderProps
Prop	Default	Type
`borderless`	—	`ConditionalValue<boolean>` Drops the ring an avatar draws around itself when it sits in a row of them.
`shape`	`'full'`	`ConditionalValue<'square' \| 'rounded' \| 'full' \| PresetVariant<'avatar', 'shape'>>` How far the corners are rounded — `full` is the circle.
`size`	`'md'`	`ConditionalValue<'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| PresetVariant<'avatar', 'size'>>` How big the avatar is, and the type size its initials take with it. `full` takes the size of whatever box it is placed in instead of a scale step.
`value`*	—	`CreateAvatarReturn` A machine built by {@link createAvatar}, so the consumer owns it rather than the Root.
`variant`	`'subtle'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| PresetVariant<'avatar', 'variant'>>` How the area behind the fallback is filled, for the avatars that have no image.

Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Fallback

AvatarFallbackProps
Prop	Default	Type
`name`	—	`string` A name to take the initials from — `"Segun Adebayo"` shows `SA`, a single word shows its first letter. Children of your own win over it, and an {@link AvatarIconProps Avatar.Icon} is what shows when there is neither.

Context

AvatarContextProps
Prop	Default	Type
`children`*	—	`(avatar: CreateAvatarReturn) => JSX.Element` Receives the machine, so a consumer can read its state without a component of their own.

Plus the three every component takes: as, render and unstyled.

Group

AvatarGroupProps
Prop	Default	Type
`align`	`'center'`	`SystemStyleObject['alignItems']` Shorthand for `alignItems`.
`borderless`	—	`ConditionalValue<boolean>` Drops the ring an avatar draws around itself when it sits in a row of them.
`justify`	`'flex-start'`	`SystemStyleObject['justifyContent']` Shorthand for `justifyContent`.
`shape`	`'full'`	`ConditionalValue<'square' \| 'rounded' \| 'full' \| PresetVariant<'avatar', 'shape'>>` How far the corners are rounded — `full` is the circle.
`size`	`'md'`	`ConditionalValue<'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| PresetVariant<'avatar', 'size'>>` How big the avatar is, and the type size its initials take with it. `full` takes the size of whatever box it is placed in instead of a scale step.
`variant`	`'subtle'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| PresetVariant<'avatar', 'variant'>>` How the area behind the fallback is filled, for the avatars that have no image.
`wrap`	—	`SystemStyleObject['flexWrap']` Shorthand for `flexWrap`.

Plus everything in GroupVariantProps, HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

createAvatar

CreateAvatarProps
Prop	Default	Type
`id`	—	`string` Seeds every id the machine hands out — the root is `avatar:{id}`, the image `avatar:{id}:image`, the fallback `avatar:{id}:fallback`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves.
`ids`	—	`AvatarElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`onStatusChange`	—	`(details: AvatarStatusChangeDetails) => void` Called when the image finishes loading, or gives up.

Plus the three every component takes: as, render and unstyled.