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

avatar.text.size.xsmall

The size of the text that is mapped according to 'avatar.size.xsmall'.
"small"

avatar.text.size.small

The size of the text that is mapped according to 'avatar.size.small'.
"medium"

avatar.text.size.medium

The size of the text that is mapped according to 'avatar.size.medium'.
"large"

avatar.text.size.large

The size of the text that is mapped according to 'avatar.size.large'.
"xlarge"

avatar.text.size.xlarge

The size of the text that is mapped according to 'avatar.size.xlarge'.
"xxlarge"