@workday/canvas-kit-react-avatar

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 button with click handler
<Avatar onClick={someFunction} />

// Rendering as a div instead of a button
<Avatar as="div" />

// Using static properties on Avatar
<Avatar
  size={Avatar.Size.xs}
  variant={Avatar.Variant.Dark}
/>

// 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

Variant	Description
Light	Light grey background, dark icon
Dark	Dark blue background, white icon

size: SystemIconCircleSize | number

The diameter of the avatar in pixels

Default: Avatar.Size.m

Name	Size (px)
xs	16
s	24
m	32
l	40
xl	64
xxl	120

altText: string

Text describing what the avatar is showing.

url: string

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

ref: React.Ref<HTMLButtonElement>

A ref to the underlying <button> or <div> element.

as: 'div'

Option to display the avatar as a div instead of a button.