@tarojsx/ui/docs/components/Button.mdx

We reinvents the UI for Taro3+

---
title: Button 按钮
---

## 示例

import { Button } from '@tarojsx/ui'
import { Image } from '@tarojs/components'
import useBaseUrl from '@docusaurus/useBaseUrl'
import dayjs from 'dayjs'
import { UI } from '@/ui'

```jsx title="类型"
<Button>default</Button>

<Button type="primary">primary</Button>

<Button type="secondary">secondary</Button>

<Button type="warn">warn</Button>

<Button type="error">error</Button>
```

<UI>
    <Button>default</Button>
</UI>

<UI>
    <Button type="primary">primary</Button>
</UI>

<UI>
    <Button type="secondary">secondary</Button>
</UI>

<UI>
    <Button type="warn">warn</Button>
</UI>

<UI>
    <Button type="error">error</Button>
</UI>

```jsx title="尺寸"
<Button size="mini">mini</Button>

<Button size="small">small</Button>
```

<UI>
    <Button size="mini" type="primary">
        mini
    </Button>
</UI>

<UI>
    <Button size="small">small</Button>
</UI>

```jsx title="透明按钮"
<Button transparent openType="getUserInfo">
    <Image src={useBaseUrl('img/logo.svg')} />
</Button>
```

<UI style={{ display: 'inline-block' }}>
    <Button transparent openType="getUserInfo">
        <Image src={useBaseUrl('img/logo.svg')} />
    </Button>
</UI>

```jsx title="点击节流"
<Button clickThrottle>快速点我!</Button>
```

<UI>
    {() => {
        const [times, setTimes] = React.useState([])
        return (
            <>
                <Button type="error" clickThrottle onClick={() => setTimes((prev) => [dayjs(), ...prev.slice(0, 4)])}>
                    快速点我!
                </Button>
                {times.map((time, index) => (
                    <div key={index}>{time.format(`ss' SSS''`)}</div>
                ))}
            </>
        )
    }}
</UI>

## API

| 参数          | 说明                                | 类型                                           | 默认值 |
| ------------- | ----------------------------------- | ---------------------------------------------- | ------ |
| type          | 类型                                | `default` `primary` `secondary` `warn` `error` |        |
| size          | 尺寸                                | `default` `normal` `small` `mini`              |        |
| clickThrottle | onClick 事件节流时间间隔, 单位: ms. | `boolean` `number`                             | 500ms  |
| transparent   | 透明按钮.                           | `boolean`                                      |        |

-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/button)
-   [`<Button />`](../modules/_button_.md)
-   [`ButtonProps`](../interfaces/_button_.buttonprops.md)