#Avatar

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

#Import

import { Avatar } from 'bumbag';

#Usage

Photo of Mr. Bean

#Shapes

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

Photo of Mr. Bean

#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

#Initials

Avatars can also be initials using the initials prop.

JM
JM
JM
JM

#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 © 2020 Jake Moxey