| checked | boolean | - | An element that overlays the avatar |
| decoding | "async" | "auto" | "sync" | async | The deconding attribute of an img element |
| disabled | boolean | false | If true sets the component into disabled format. |
| icon | ReactElement<any, string | JSXElementConstructor<any>> | - | An svg to overlay over the avatar |
| label * Required | string | - | Accessibility text. |
| placeholder | string | - | A placeholder for the image to use when not loaded, in css format (e.g. url("https://example.com")) |
| shape | "circle" | "square" | circle | The shape of the avatar. |
| size | null | number | "auto" | "stretch" | OnlyString | "fit-content" | "max-content" | "min-content" | "intrinsic" | "min-intrinsic" | "$auto" | "$none" | "$0" | "$0.5" | "$0.25" | "$1" | "$2" | "$px" | "$0.75" | "$1.25" | "$1.5" | "$1.75" | "$2.5" | "$3" | "$3.5" | "$4" | "$4.5" | "$5" | "$5.5" | "$6" | "$6.5" | "$7" | "$7.5" | "$8" | "$8.5" | "$9" | "$10" | "$11" | "$12" | "$13" | "$14" | "$15" | "$16" | "$18" | "$20" | "$22.5" | "$24" | "$26" | "$28" | "$30" | "$32" | "$36" | "$40" | "$44" | "$45" | "$48" | "$52" | "$56" | "$60" | "$64" | "$72" | "$80" | "$96" | "$112" | "$128" | "$144" | "$168" | "$192" | "$224" | "$256" | "$288" | "$320" | "$1/4" | "$1/3" | "$1/2" | "$2/3" | "$3/4" | "$full" | "$fit" | "$max" | "$min" | "$viewHeight" | "$viewWidth" | "$dialogMobileWidth" | "$dialogDesktopWidth" | "-$1.5" | "-$4" | "-$6" | Partial<Record<"disabled" | "checked" | "base" | "xs" | "sm" | "md" | "lg" | "xl" | "hover" | "active" | "readonly", Height | "$auto" | "$none" | "$0" | "$0.5" | "$0.25" | "$1" | ... 73 more ... | undefined>> | Partial<Record<"disabled" | "checked" | "base" | "xs" | "sm" | "md" | "lg" | "xl" | "hover" | "active" | "readonly", Width | "$auto" | "$none" | "$0" | "$0.5" | "$0.25" | "$1" | "$2" | ... 72 more ... | undefined>> | - | A custom sizing for the avatar |
| src | string | - | Uses tokens space settings to set the size |