grommet
docs
components

Avatar

an avatar

Storybook
Github

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

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string
"a user friendly label for screen readers"

imageProps

Additional properties to pass to the internal Image component when rendering an avatar.

object
{ alt: "User Avatar", fit: "cover" }

size

A fixed size.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"xsmall"
"small"
"medium"
"large"
"xlarge"
"2xl"
"3xl"
"4xl"
"5xl"
"string"

src

A URL for an avatar image.

string
"//s.gravatar.com/avatar/"

React/DOM Properties

At its core, the Avatar component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

avatar.extend

Any additional style for the Avatar.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

avatar.size.xsmall

The xsmall size of the Avatar.

string
"18px"

avatar.size.small

The small size of the Avatar.

string
"24px"

avatar.size.medium

The medium size of the Avatar.

string
"48px"

avatar.size.large

The large size of the Avatar.

string
"72px"

avatar.size.xlarge

The xlarge size of the Avatar.

string
"96px"

avatar.size.2xl

The 2xlarge size of the Avatar.

string
"120px"

avatar.size.3xl

The 3xlarge size of the Avatar.

string
"144px"

avatar.size.4xl

The 4xlarge size of the Avatar.

string
"168px"

avatar.size.5xl

The 5xlarge size of the Avatar.

string
"192px"

avatar.text.extend

Any additional style for the text.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

avatar.text.fontWeight

The font weight of the label.

number
300

avatar.text.size.xsmall

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

string
"14px"

avatar.text.size.small

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

string
"18px"

avatar.text.size.medium

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

string
"22px"

avatar.text.size.large

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

string
"26px"

avatar.text.size.xlarge

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

string
"34px"

avatar.text.size.2xl

The size of the text that is mapped according to 'avatar.size.2xl'.

string
"42px"

avatar.text.size.3xl

The size of the text that is mapped according to 'avatar.size.3xl'.

string
"54px"

avatar.text.size.4xl

The size of the text that is mapped according to 'avatar.size.4xl'.

string
"70px"

avatar.text.size.5xl

The size of the text that is mapped according to 'avatar.size.5xl'.

string
"90px"