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

import {
  PrimaryButton,
  SecondaryButton,
  TertiaryButton,
  DeleteButton,
} from '@workday/canvas-kit-react/button';

import Primary from './examples/Primary';
import PrimaryInverse from './examples/PrimaryInverse';
import Secondary from './examples/Secondary';
import SecondaryInverse from './examples/SecondaryInverse';
import Tertiary from './examples/Tertiary';
import TertiaryInverse from './examples/TertiaryInverse';
import Delete from './examples/Delete';
import CustomStyles from './examples/CustomStyles';


# Canvas Kit Button

Clickable button elements that extend the native `<button>` element with Canvas styling.

[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)

## Installation

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

## Usage

### PrimaryButton

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

Here is a basic example of a Primary Button. Buttons can be customized with several props to change
the size, add an icon, etc.

<ExampleCodeBlock code={Primary} />

Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
Button, the default outline as well as the hover and focus states are different. Use this variant
when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.

<ExampleCodeBlock code={PrimaryInverse} />

#### Component API

<SymbolDoc name="PrimaryButton" fileName="/react/" hideHeading hideDescription headingStart={4} />

### SecondaryButton

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

<ExampleCodeBlock code={Secondary} />

Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
on a dark or colorful background such as `blueberry400`.

<ExampleCodeBlock code={SecondaryInverse} />

#### Component API

<SymbolDoc name="SecondaryButton" fileName="/react/" hideHeading hideDescription headingStart={4} />

### TertiaryButton

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

<ExampleCodeBlock code={Tertiary} />

Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
on a dark or colorful background such as `blueberry400`.

<ExampleCodeBlock code={TertiaryInverse} />

#### Component API

<SymbolDoc name="TertiaryButton" fileName="/react/" hideHeading hideDescription headingStart={4} />

### DeleteButton

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

<ExampleCodeBlock code={Delete} />

#### Component API

<SymbolDoc name="DeleteButton" fileName="/react/" hideHeading hideDescription headingStart={4} />

### Custom Styles

We understand that there are instances in which consumers might need to adjust styles for specific
use cases. All of our buttons extend our lower level base button props which extends style
properties that come from `Box`. Below are some examples in which you can overwrite styles for all
of our buttons. Please use this sparingly and try to adhere to the design system.

<ExampleCodeBlock code={CustomStyles} />

### Accessible Use of the `as` Prop

Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
should be used for navigation.

## Specifications

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