react/pages/zh-cn/components/button.mdx

import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Grid } from 'components'
import Router from 'next/router'
import Settings from '@zeit-ui/react-icons/settings'
import UserX from '@zeit-ui/react-icons/userX'
import Power from '@zeit-ui/react-icons/power'

export const meta = {
  title: '按钮 Button',
  group: '通用',
}

## Button / 按钮

用于触发一个操作。


<Playground
  desc="基础的 `Button` 包含一个动画效果。"
  scope={{ Button }}
  code={`
<Button>动作</Button>
`} />

<Playground
  title="加载中"
  desc="表示正在运行或加载中的状态。"
  scope={{ Button }}
  code={`
<Button loading>动作</Button>
`} />

<Playground
  title="禁用的"
  desc="不对任何操作进行响应。"
  scope={{ Button }}
  code={`
<Button disabled>点击</Button>
`} />

<Playground
  title="阴影"
  desc="使用阴影突出显示更高层级的按钮。"
  scope={{ Button }}
  code={`
<Button shadow type="secondary">阴影</Button>
`} />

<Playground
  title="类型"
  desc="不同状态下的按钮。"
  scope={{ Button, Grid }}
  code={`
<Grid.Container gap={2}>
  <Grid><Button auto type="secondary">次要的</Button></Grid>
  <Grid><Button auto type="success">成功</Button></Grid>
  <Grid><Button auto type="warning">警告</Button></Grid>
  <Grid><Button auto type="error">错误</Button></Grid>
  <Grid><Button auto type="abort">中止</Button></Grid>
  <Grid><Button auto type="secondary-light">次要的 浅色</Button></Grid>
  <Grid><Button auto type="success-light">成功 浅色</Button></Grid>
  <Grid><Button auto type="warning-light">警告 浅色</Button></Grid>
  <Grid><Button auto type="error-light">错误 浅色</Button></Grid>
</Grid.Container>
`} />

<Playground
  title='"幽灵"按钮'
  desc="底色与主色相反的透明按钮。"
  scope={{ Button, Spacer }}
  code={`
<>
  <Button type="secondary" ghost>次要的</Button> <Spacer y={.5} />
  <Button type="success" ghost>成功</Button> <Spacer y={.5} />
  <Button type="warning" ghost>警告</Button> <Spacer y={.5} />
  <Button type="error" ghost>错误</Button>
</>
`} />


<Playground
  title="大小"
  desc="不同大小的按钮组件。"
  scope={{ Button, Spacer }}
  code={`
<>
  <Button size="mini">小</Button> <Spacer y={.5} />
  <Button size="small">较小</Button> <Spacer y={.5} />
  <Button>中等</Button> <Spacer y={.5} />
  <Button size="large">最大</Button> <Spacer y={.5} />
  <Button auto>自动宽度</Button>
</>
`} />

<Playground
  title="图标"
  desc="按钮内的图标色彩和大小将会被自动设置。"
  scope={{ Button, Spacer, Settings, UserX, Power }}
  code={`
<>
  <Button iconRight={<Power />} auto size="small">关闭</Button>
  <Spacer y={.5} />
  <Button icon={<Settings />} auto>按钮</Button>
  <Spacer y={.5} />
  <Button icon={<Settings />} type="success" size="small">成功</Button>
  <Spacer y={.5} />
  <Button icon={<Settings />} type="secondary">成功</Button>
  <Spacer y={.5} />
  <Button icon={<UserX />} type="error" ghost>移除用户</Button>
  <Spacer y={.5} />
  <Button icon={<UserX />} disabled>移除用户</Button>
</>
`} />

<Attributes edit="/pages/zh-cn/components/button.mdx">
<Attributes.Title>Button.Props</Attributes.Title>

| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- | -------------- | ------ |
| **type** | 按钮的类型 | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
| **size** | 按钮的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
| **ghost** | 是否为反色按钮 | `boolean` | - | `false` |
| **loading** | 是否显示加载中的指示器 | `boolean` | - | `false` |
| **shadow** | 是否显示阴影 | `boolean` | - | `false` |
| **auto** | 自动缩放宽度 | `boolean` | - | `false` |
| **effect** | 是否显示动画效果 | `boolean` | - | `true` |
| **disabled** | 是否禁用按钮 | `boolean` | - | `false` |
| **onClick** | 点击事件 | `MouseEventHandler` | - | - |
| **icon** | 在按钮内显示图标 | `ReactNode` | - | - |
| **iconRight** | 在按钮的另一侧显示图标 | `ReactNode` | - | - |
| **htmlType** | 按钮的原生类型属性 | `ButtonHTMLAttributes.type` | - | `button` |
| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title>ButtonTypes</Attributes.Title>

```ts
type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
  | 'secondary-light' | 'success-light' | 'warning-light' | 'error-light'
```

<Attributes.Title>NormalSizes</Attributes.Title>

```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>