grommet
components

Avatar

an avatar

Storybook
CodeSandbox

Avatar is a Box with the following properties preset. You can customize it using the properties available in Box.

Props

size

A fixed size.
"xsmall""small""medium""large""xlarge""string"

src

Specifies a URL string for an avatar image.
"string"

Theme

avatar.extend

Any additional style for the Avatar.
"any CSS"
(props) => {}

avatar.size.xsmall

The xsmall size of the Avatar.
"18px"

avatar.size.small

The small size of the Avatar.
"24px"

avatar.size.medium

The medium size of the Avatar.
"48px"

avatar.size.large

The large size of the Avatar.
"72px"

avatar.size.xlarge

The xlarge size of the Avatar.
"96px"

avatar.text.extend

Any additional style for the text.
"any CSS"
(props) => {}

avatar.text.fontWeight

The font weight of the label.
number