Usage
MK
Placeholder
If src
prop is not set, equals to null or image cannot be loaded, placeholder icon will be displayed instead.
Any React node can be used instead of placeholder icon. Usually icon or initials are used in this case:
VR
Size and radius
Variant
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color
Shades
Change root element
With custom component (react router example):
Avatar.Group
Avatar.Group
component can be used to combine multiple avatars into a stack:
+5
You can combine it with Tooltip or Popover to show additional information on hover
+2
Accessibility
Avatar renders img html element. Do not forget to add alt text.
If image fails to load alt will be used as title
for placeholder.
Avatar component props
Name | Type | Description |
---|---|---|
alt | string | Image alt text or title for placeholder variant |
children | ReactNode | Custom placeholder |
color | MantineColor | Key of theme.colors |
gradient | MantineGradient | Gradient input, only used when variant="gradient", theme.defaultGradient by default |
imageProps | Record<string, any> | <img /> element attributes |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, "xl" by default |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Avatar width and height |
src | string | Image url |
variant | Variants<"outline" | "light" | "filled" | "gradient"> | Controls appearance |
Avatar.Group component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Avatar components |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" | Negative space between Avatars |
Avatar component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Avatar-root | Root element |
image | .asuikit-Avatar-image | Main img tag, rendered when src is set to valid image url |
placeholder | .asuikit-Avatar-placeholder | Placeholder element, rendered when src is null or image cannot be loaded |
placeholderIcon | .asuikit-Avatar-placeholderIcon | Default placeholder icon |