import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock} from '@workday/canvas-kit-docs';

import Basic from './examples/Basic';
import Button from './examples/Button';
import Image from './examples/Image';
import LazyLoad from './examples/LazyLoad';
import ObjectFit from './examples/ObjectFit';
import Size from './examples/Size';
import Variant from './examples/Variant';
import CustomStyles from './examples/CustomStyles';


# Canvas Kit Avatar

Represents a person's profile.

[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

<SymbolDescription name="Avatar" fileName="/react/" />

The example below shows multiple instances of a `Avatar` with various configurations.

### Basic

By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
the `as` prop.

<ExampleCodeBlock code={Basic} />

### Button

Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
semantic element to a `div`. This should be done with caution to ensure the best accessibility.
Generally, `<button>` elements should be used for actions.

<ExampleCodeBlock code={Button} />

### Variant

Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
by including `variant="dark"`.

<ExampleCodeBlock code={Variant} />

### Size

Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
sizing options. See Component API for more details.

Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.

<ExampleCodeBlock code={Size} />

### Image

Avatar renders an image when the `url` prop is defined.

<ExampleCodeBlock code={Image} />

### Object Fit

Avatar defaults to using `contain` for object-fit. You can change this property to any other
acceptable `object-fit` properties. For best fit, try to use square images.

<ExampleCodeBlock code={ObjectFit} />

### Lazy Load

Example of implementing lazy load behavior with Avatar.

<ExampleCodeBlock code={LazyLoad} />

### Custom Styling

To change the background color of the Avatar, you can use our `createStencil` functionality.

<ExampleCodeBlock code={CustomStyles} />

## Component API

<SymbolDoc name="Avatar" fileName="/react/" />

## Specifications

<Specifications file="Avatar.spec.ts" name="Avatar" />