# Button

按钮用于开始一个即时操作。

# Usage

## Basic

```tsx
import React from 'react'
import { Button } from 'react-icecream'

export default () => {
  return (
    <div className="buttons-wrapper">
      <Button>Default Button</Button>
      <Button loading>Default Button</Button>
      <Button disabled>Default Button</Button>
      <br />
      <Button type="primary">Primary Button</Button>
      <Button type="primary" loading>Primary Button</Button>
      <Button type="primary" disabled>
        Primary Button
      </Button>
      <br />
      <Button type="secondary">Secondary Button</Button>
      <Button type="secondary" loading>Secondary Button</Button>
      <Button type="secondary" disabled>
        Secondary Button
      </Button>
      <br />
      <Button type="link">Link Button</Button>
      <Button type="link" loading>Link Button</Button>
      <Button type="link" disabled>
        Link Button
      </Button>
      <br />
      <Button type="text">Text Button</Button>
      <Button type="text" loading>Text Button</Button>
      <Button type="text" disabled>
        Text Button
      </Button>
      <div style={{ padding: '16px 16px 8px 16px', background: '#00AAE7' }}>
        <Button type="reverse">Reverse Button</Button>
        <Button type="reverse" loading>Reverse Button</Button>
        <Button type="reverse" disabled>
          Reverse Button
        </Button>
      </div>
      <br />
      <Button type="dashed">Dashed Button</Button>
      <Button type="dashed" loading>Dashed Button</Button>
      <Button type="dashed" disabled>
        Dashed Button
      </Button>
    </div>
  )
}
```

## 告警按钮

```tsx
import React from 'react'
import { Button } from 'react-icecream'

export default () => {
  return (
    <div className="buttons-wrapper">
      <Button type="primary" danger>Primary Danger Button</Button>
      <Button type="primary" danger loading>Primary Danger Button</Button>
      <Button type="primary" danger disabled>
        Primary Danger Button
      </Button>
      <br />
      <Button type="secondary" danger>Secondary Danger Button</Button>
      <Button type="secondary" danger loading>Secondary Danger Button</Button>
      <Button type="secondary" danger disabled>
        Secondary Danger Button
      </Button>
      <br />
      <Button type="link" danger>Link Danger Button</Button>
      <Button type="link" danger loading>Link Danger Button</Button>
      <Button type="link" danger disabled>
        Link Danger Button
      </Button>
      <br />
      <Button type="text" danger>Text Danger Button</Button>
      <Button type="text" danger loading>Text Danger Button</Button>
      <Button type="text" danger disabled>
        Text Danger Button
      </Button>
    </div>
  )
}
```

## 不同 size

```tsx
import React from 'react'
import { Button } from 'react-icecream'

export default () => {
  return (
    <div className="buttons-wrapper">
      <Button size="small">Default Button</Button>
      <Button>Default Button</Button>
      <Button size="large">Default Button</Button>
      <br />
      <Button type="primary" size="small">
        Primary Button
      </Button>
      <Button type="primary">Primary Button</Button>
      <Button type="primary" size="large">
        Primary Button
      </Button>
      <br />
      <Button type="link" size="small">
        Link Button
      </Button>
      <Button type="link">Link Button</Button>
      <Button type="link" size="large">
        Link Button
      </Button>
      <br />
      <Button type="text" size="small">
        Text Button
      </Button>
      <Button type="text">Text Button</Button>
      <Button type="text" size="large">
        Text Button
      </Button>
      <br />
      <Button type="dashed" size="small">
        Dashed Button
      </Button>
      <Button type="dashed">Dashed Button</Button>
      <Button type="dashed" size="large">
        Dashed Button
      </Button>
    </div>
  )
}
```

## 配合 Icon 使用

```tsx
import React from 'react'
import Add from 'react-icecream/icons/Add'
import { Button } from 'react-icecream'

export default () => {
  return (
    <div className="buttons-wrapper">
      <Button icon={<Add />}>创建</Button>
      <Button endIcon={<Add />}>创建</Button>
      <Button icon={<Add />} endIcon={<Add />}>创建</Button>
      <Button icon={<Add />} size="small" type="primary">
        创建
      </Button>
      <Button icon={<Add />} type="primary">
        创建
      </Button>
      <Button icon={<Add />} size="large" type="primary">
        创建
      </Button>
      <Button icon={<Add />} />
    </div>
  )
}
```

## 使用 `as`

通过 prop `as` 我们可以将 `Button` 渲染为除 HTML `button` 外的其他元素：

<code src="./demos/as.tsx"></code>

<API></API>