Avatar
An image that represents an entity
name | type | default | description |
|---|---|---|---|
| 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 | FC<{}> | - | 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 | "auto" | "initial" | "unset" | "none" | "center" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "0.5" | "60vh" | "80vw" | "-px" | "0.25" | "px" | "0.75" | "1.25" | "1.5" | "1.75" | "2.5" | "3.5" | "4.5" | "5.5" | "6.5" | "7.5" | "8.5" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "18" | "20" | "22.5" | "24" | "25" | "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" | "-0.5" | "-1.5" | "-4" | "-4.5" | "-6" | "-full" | { readonly base?: "auto" | "initial" | "unset" | "none" | "center" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "0.5" | "60vh" | "80vw" | "-px" | "0.25" | "px" | "0.75" | "1.25" | "1.5" | ... 65 more ... | undefined; ... 4 more ...; readonly xl?: "auto" | ... 87 more ... | undefined; } | - | A custom sizing for the avatar |
| src | string | - | Uses tokens space settings to set the size |
The size of the avatar is controlled by the width of it's parent component.
The placeholder is shown if the src property is undefined or if an error occurs loading the src.
The placeholder is shown if the src property is undefined or if an error occurs loading the src.
If you are using Next.js and configured next/image appropriately, you can pass it in with the as prop.
