/*doc
---
title: Buttons
name: button_react
categories:
 - react_base_buttons
 - react_all
---

<code class="pam">
<img src="/styleguide/download.svg" width="16" height="16"/>
npm install pui-react-buttons --save
</code>

## Props

Property | Required | Type | Default | Description
---------|----------|------|---------|------------
alt   | no | Boolean                                        | false     | Whether to render as 'alternate' button
flat  | no | Boolean                                        | false     | Whether to render as a 'flat' button
href  | no | String                                         |           | If specified, button clicks will redirect to this href
kind  | no | oneOf('default', 'danger', 'primary', 'brand') | 'default' | Button theme
large | no | Boolean                                        | false     | Whether to render the button large
small | no | Boolean                                        | false     | Whether to render teh button small

## Basic usage

Import the subcomponents:

```
import {DefaultButton, PrimaryButton, DangerButton, BrandButton} from 'pui-react-buttons';
import {Icon} from 'pui-react-iconography';
```

Buttons use the button tag by default. If you'd like a link rather than a button, simply add an `href` attribute.

```react_example_table
<DefaultButton>
  Button
</DefaultButton>

<DefaultButton href="http://example.com">
  Link
</DefaultButton>
```

## Styles

There are 3 main button color schemes: Default, Primary, Danger. There is also Brand, but this should only be used for marketing.

```react_example_table
<DefaultButton>
  Default
</DefaultButton>

<PrimaryButton>
  Primary
</PrimaryButton>

<DangerButton>
  Danger
</DangerButton>

<BrandButton>
  Brand
</BrandButton>
```

For each color scheme there is the default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).
To use the alt style, set the `alt` prop, to use the flat style, use the `flat` prop

```react_example_table
<DefaultButton alt>
  Alt
</DefaultButton>

<DefaultButton flat>
  Flat
</DefaultButton>

<PrimaryButton alt>
  Primary Alt
</PrimaryButton>
```

## Sizing

To make a button large, set the `large` property to true, to make it small, set `small` to true.

```react_example_table
<PrimaryButton large>
  Big Button
</PrimaryButton>

<PrimaryButton small>
  Small Button
</PrimaryButton>
```

## Icons

Buttons can have icons by specifying the `icon` prop and giving it a node:

```react_example_table
<PrimaryButton icon={<Icon src="add"/>}>
  Icon button
</PrimaryButton>
```
*/

/*doc
---
title: Buttons
name: button_react
categories:
 - react_base_buttons
 - react_all
---

<code class="pam">
<img src="/styleguide/download.svg" width="16" height="16"/>
npm install pui-react-buttons --save
</code>

## Props

Property | Required | Type | Default | Description
---------|----------|------|---------|------------
alt   | no | Boolean                                        | false     | Whether to render as 'alternate' button
flat  | no | Boolean                                        | false     | Whether to render as a 'flat' button
href  | no | String                                         |           | If specified, button clicks will redirect to this href
large | no | Boolean                                        | false     | Whether to render the button large
small | no | Boolean                                        | false     | Whether to render teh button small

## Basic usage

Import the subcomponents:

```
import {DefaultButton, PrimaryButton, DangerButton, BrandButton} from 'pui-react-buttons';
import {Icon} from 'pui-react-iconography';
```

Buttons use the button tag by default. If you'd like a link rather than a button, simply add an `href` attribute.

```react_example_table
<DefaultButton>
  Button
</DefaultButton>

<DefaultButton href="http://example.com">
  Link
</DefaultButton>
```

## Styles

There are 3 main button color schemes: Default, Primary, Danger. There is also Brand, but this should only be used for marketing.

```react_example_table
<DefaultButton>
  Default
</DefaultButton>

<PrimaryButton>
  Primary
</PrimaryButton>

<DangerButton>
  Danger
</DangerButton>

<BrandButton>
  Brand
</BrandButton>
```

For each color scheme there is the default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).
To use the alt style, set the `alt` prop, to use the flat style, use the `flat` prop

```react_example_table
<DefaultButton alt>
  Alt
</DefaultButton>

<DefaultButton flat>
  Flat
</DefaultButton>

<PrimaryButton alt>
  Primary Alt
</PrimaryButton>
```

## Sizing

To make a button large, set the `large` property to true, to make it small, set `small` to true.

```react_example_table
<PrimaryButton large>
  Big Button
</PrimaryButton>

<PrimaryButton small>
  Small Button
</PrimaryButton>
```

## Icons

Buttons can have icons by specifying the `icon` prop and giving it a node:

```react_example_table
<PrimaryButton icon={<Icon src="add"/>}>
  Icon button
</PrimaryButton>
```
*/

remove kind prop from button prop table [#135527399]