Avatar
A component for displaying user avatars with a fallback option.
In this guide, you'll learn how to use the Avatar component.
M
Was this example helpful?
Usage#
API Reference#
This component is based on the Radix UI Avatar primitive.
| Prop | Type | Default |
|---|---|---|
src | string | - |
fallback | string | - |
variant | "squared"| "rounded" | "rounded" |
size | "2xsmall"| "xsmall"| "small"| "base"| "large"| "xlarge" | "base" |
Was this helpful?
Examples#
Avatar Variants#
MM
Was this example helpful?
Avatar Sizes#
MMMMMM
Was this example helpful?
Avatar Fallback Only#
JD
Was this example helpful?
Avatar Custom Styling#
M
Was this example helpful?
Avatar Accessibility#
You can add the aria-label prop to the Avatar component for better accessibility.
M
Was this guide helpful?