Avatar
An image that represents an entity
import { Avatar } from '@ensdomains/thorin'
<div style={{ maxWidth: '50px' }}><Avatar label="Noun 97" src={avatars.noun97} /></div>
name | type | default | description |
|---|---|---|---|
disabled | boolean | false | If true sets the component into disabled format. |
label* Required | string | - | Accessibility text. |
noBorder | boolean | false | If true, removes the border around the avatar. |
overlay | ReactNode | - | An element that overlays the avatar |
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. |
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.
By default, there is a light border around the edge to define image edges on similarly colored backgrounds. This can be disabled by using the noBorder prop.
The placeholder is shown if the src property is undefined or if an error occurs loading the src.