@workday/canvas-kit-react-avatar NPM

Canvas Kit Avatar

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

Installation

yarn add @workday/canvas-kit-react

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

Usage

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

// Basic
<Avatar />

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

// Using AvatarTheme and AvatarSize imports directly
<Avatar size={AvatarSize.xs} themeColor={AvatarTheme.Dark} />

Static Properties

`ThemeColor: AvatarTheme`

<Avatar themeColor={Avatar.ThemeColor.Dark} />

`Size: AvatarSize | 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

`themeColor: AvatarTheme`

The theme of the avatar if using a default image.

Default: AvatarTheme.Light

Theme	Description
`Light`	Light grey background, dark icon
`Dark`	Dark blue background, white icon

`size: AvatarSize`

The diameter of the avatar in pixels

Default: AvatarSize.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.

`buttonRef: React.Ref<HTMLButtonElement>`

A ref to the underlying <button> element.

`onClick: (React.SyntheticEvent) => void`

A click event handler for this component.

canvas canvas-kit react components workday avatar

@emotion/core @emotion/is-prop-valid @workday/canvas-kit-react-common @workday/canvas-kit-react-core @workday/canvas-kit-react-icon @workday/canvas-system-icons-web

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.6.1-next.14

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago