Avatar#

The <Avatar> component renders a 60x60 pixel image by default.

Import#

import { Avatar } from 'bumbag';

Usage#

Photo of Mr. Bean
Editable example

Shapes#

Avatars are available in two different shapes and can be changed using the variant prop.

Photo of Mr. Bean
Editable example

Sizes#

Avatars are available in five different sizes or you can set your own using the size prop.

Photo of Mr. BeanPhoto of Mr. BeanPhoto of Mr. BeanPhoto of Mr. BeanPhoto of Mr. Bean
Editable example

Initials#

Avatars can also be initials using the initials prop.

JM
JM
JM
JM
Editable example

Accessibility#

Rules#

  • If the avatar is an image, it must have an alt prop.

Props#

Avatar Props#

variant (string & {}) | "circle"

Variant of the avatar.

src string

URL of the avatar image.

size string | (string & {})

Size of the avatar.

initials string

Initials to place on the avatar.

palette

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})

Color of the avatar.

Theming#

Avatar.styles.base
Avatar.styles.sizes.small
Avatar.styles.sizes.default
Avatar.styles.sizes.medium
Avatar.styles.sizes.large
Copyright © 2021 Jake Moxey