Avatar

Import
import { Avatar } from "reshaped";
import type { AvatarProps } from "reshaped";
Related components
Supports responsive size values

Automatically uses presentation role if aria-label is not provided



Usage

Avatar displays a masked image when src is passed to it. It uses the image as a decorative element, assuming that its text description comes from the adjacent elements. If there is no text content available and you need to make it accessible for screen-readers, you can provide an aria-label attribute to it.

When the image for the avatar is not available for display, you can use the initials fallback.

Another fallback option that can be used when you don't have an image for the Avatar is to use an icon. This approach can be used for displaying company logotypes or as a thumbnail for content sections.

Colors

You can assign one of the color tokens to be used as background in Avatar, which will be visible for initials and icon fallbacks.

Sizes

Avatar has a dynamic size property that supports any number value and automatically adjusts typography and icon sizes.

Avatar supports responsive syntax for its size property, which means you can change its size based on the viewport. Changing it will automatically adjust the size of its contents.

Shape

Avatar can be rendered using a square shape with a squared property.

Accessibility

  • Avatar is a decorative image by default and changes to img role when alt property is passed
Previous
Next