# Buttons

```jsx
import {Button} from 'antd';
```

```jsx
<Button type="primary">Primary</Button>
<Button type="primary" disabled>
  Primary(disabled)
</Button>

<Button>Default</Button>
<Button disabled>Default(disabled)</Button>

<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>
  Dashed(disabled)
</Button>

<Button danger>Danger Default</Button>
<Button danger disabled>
  Danger Default(disabled)
</Button>
```

### API <a href="#api" id="api"></a>

To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.

| Property | Description                                                                                                                      | Type                           | Default   | Version |
| -------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --------- | ------- |
| disabled | disabled state of button                                                                                                         | boolean                        | `false`   |         |
| ghost    | make background transparent and invert text and border colors                                                                    | boolean                        | `false`   |         |
| href     | redirect url of link button                                                                                                      | string                         | -         |         |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string                         | `button`  |         |
| icon     | set the icon component of button                                                                                                 | ReactNode                      | -         |         |
| loading  | set the loading status of button                                                                                                 | boolean \| { delay: number }   | `false`   |         |
| shape    | can be set to `circle`, `round` or omitted                                                                                       | string                         | -         |         |
| size     | set the size of button                                                                                                           | `large` \| `middle` \| `small` |           |         |
| target   | same as target attribute of a, works when href is specified                                                                      | string                         | -         |         |
| type     | can be set to `primary` `ghost` `dashed` `link` or omitted (meaning `default`)                                                   | string                         | `default` |         |
| onClick  | set the handler to handle `click` event                                                                                          | (event) => void                | -         |         |
| block    | option to fit button width to its parent width                                                                                   | boolean                        | `false`   |         |
| danger   | set the danger status of button                                                                                                  | boolean                        | `false`   |         |