> For the complete documentation index, see [llms.txt](https://bctc.gitbook.io/vant-react-official-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bctc.gitbook.io/vant-react-official-docs/untitled.md).

# Button

### [Demo](https://vant.bctc.io/?path=/story/button--button-types)

#### Install

```
import React from 'react';
import { Button } from 'vant-react';
```

## Usage

**Type**

```
<Button type="default">Default</Button>
<Button type="primary">Primary</Button>
<Button type="info">Info</Button>
<Button type="danger">Danger</Button>
<Button type="warning">Warning</Button>
```

**Plain**

```
<Button plain type="primary">Primary</Button
<Button plain type="danger">Danger</Button>
```

#### Hairline

```
<Button hairline type="primary">Primary</Button
<Button hairline type="danger">Danger</Button>
```

**Disable**

```
<Button disabled type="primary">Diabled</Button>
<Button disabled type="info">Diabled</Button>
```

**Loading**

```
<Button loading type="primary" />
<Button loading type="primary" loadingType="spinner" />
<Button loading type="info" loadingText="Loading..." />
```

**Shape**

```
<Button square type="primary">Square</Button>
<Button round type="info">Round</Button>
```

**Custom Color**

```
<Button color="FFECB3">Pure</Button
<Button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</Button>
<Button color="00796B" plain>Pure</Button>
<Button color="00796B" fontColor="#eee" plain>Plain</Button>
```

**Tags**

```
<Button tag="a">A Tag</Button>
<Button tag="button">Button Tag</Button>
```

**Native Type**

```
<Button nativeType="button">Button Type</Button>
<Button nativeType="reset">Reset Type</Button>
<Button nativeType="submit">Submit Type</Button>
```

**Block**

```
<Button>Non Block Button</Button>
<Button block>Block Button</Button>
```

**Icon**

```
<Button icon="https://img.yzcdn.cn/vant/logo.png">Custom Icon Button</Button>
```

**Action**

```
<Button click={(e) => alert(e.target)}>Handle Click</Button>
<Button touchstart={(e) => alert(e.target)}>Handle Touchstart</Button>
```

**URL**

```
<Button tag="a" replace url="https://github.com/mxdi9i7/vant-react">Open URL in Same Frame</Button>
<Button tag="a" url="https://github.com/mxdi9i7/vant-react">Open URL in New Tab</Button>
```

## API

**Props**

| Attribute     | Description                                                                                                            | Type          | Default    | Required   |
| ------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------- | ---------- | ---------- |
| `type`        | Can be set to `primary` `info` `warning` `danger`                                                                      | ***string***  | `default`  | *optional* |
| `text`        | Text to be displayed in button                                                                                         | ***string***  | -          | *optional* |
| `color`       | Color, in hex value:`a9s7dn`, in gradient value:`linear-gradient(to right, #4bb0ff, #6149f6),in rgb: rgb(210,210,210)` | ***string***  | -          | *optional* |
| `fontColor`   | Css Color                                                                                                              | ***string***  | -          | *optional* |
| `icon`        | Button icon that appears on the left                                                                                   | ***string***  | -          | *optional* |
| `tag`         | HTML Tag                                                                                                               | ***string***  | -          | *optional* |
| `nativeType`  | Native Type Attribute                                                                                                  | ***string***  | ' '        | *optional* |
| `plain`       | Whether to be plain button                                                                                             | ***boolean*** | `false`    | *optional* |
| `round`       | Whether to be round button                                                                                             | ***boolean*** | `false`    | *optional* |
| `square`      | Whether to be square button                                                                                            | ***boolean*** | `false`    | *optional* |
| `disabled`    | Whether to disable button                                                                                              | ***boolean*** | `false`    | *optional* |
| `loading`     | Whether to show loading status                                                                                         | ***boolean*** | `false`    | *optional* |
| `loadingText` | Loading text                                                                                                           | ***string***  | -          | *optional* |
| `loadingType` | Loading type, can be set to`spinner`                                                                                   | ***string***  | `circular` | *optional* |
| `url`         | Link URL                                                                                                               | ***string***  | -          | *optional* |
| `replace`     | Whether open in current tab                                                                                            | ***boolean*** | `false`    | *optional* |

**Event**

| Event        | Description                                             | Arguments          |
| ------------ | ------------------------------------------------------- | ------------------ |
| `click`      | Triggered when click button and not disabled or loading | *event: Event*     |
| `touchstart` | Triggered when touch start on mobile                    | *event:TouchEvent* |