Canvas Kit Avatar

A component showing a user's photo with a circular crop.

Installation

yarn add @workday/canvas-kit-react

or

yarn add @workday/canvas-kit-react-avatar

Usage

import * as React from 'react';
import {Avatar, AvatarVariant} from '@workday/canvas-kit-react-avatar';

// Basic
<Avatar />

// Using static properties on Avatar
<Avatar
  size={Avatar.Size.xs}
  variant={Avatar.Variant.Dark}
  onClick={() => { window.alert('Avatar Clicked') }}
/>

// Using AvatarVariant import directly
<Avatar size={Avatar.Size.xs} variant={AvatarVariant.Dark} />

Static Properties

variant: AvatarVariant

<Avatar variant={Avatar.Variant.Dark} />

Size: SystemIconCircleSize | number

<Avatar size={Avatar.Size.xs} />

// Custom Size.
// Note: Please use the predefined sizes as it works nicely with the Canvas Design System
<Avatar size={48} />

Component Props

Required

None

Optional

variant: AvatarVariant

The variant of the avatar if using a default image.

Default: AvatarVariant.Light

size: SystemIconCircleSize | number

The diameter of the avatar in pixels

Default: Avatar.Size.m

altText: string

Text describing what the avatar is showing.

url: string

The URL of the user's photo. Expects a square (1:1) photo.

buttonRef: React.Ref<HTMLButtonElement>

A ref to the underlying <button> element.

onClick: (React.SyntheticEvent) => void

A click event handler for this component.