Skip to content

Avatar

An image that represents an entity
import { Avatar } from '@ensdomains/thorin'
<div style={{ maxWidth: '50px' }}>
  <Avatar label="Noun 97" src={avatars.noun97} />
</div>

Props
#

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

Sizes
#

The size of the avatar is controlled by the width of it's parent component.

Placeholder
#

The placeholder is shown if the src property is undefined or if an error occurs loading the src.

Shapes
#

Overlay
#

Border
#

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.

Disabled
#

The placeholder is shown if the src property is undefined or if an error occurs loading the src.

Edit on GitHub