2016-04-20 18:51:31 +08:00
---
category: Components
2016-11-09 14:43:32 +08:00
type: General
2016-04-22 14:52:19 +08:00
title: Button
2016-04-20 18:51:31 +08:00
---
2016-04-22 14:52:19 +08:00
To trigger an operation.
2016-05-25 09:43:26 +08:00
## When To Use
2016-04-22 14:52:19 +08:00
2016-11-29 17:13:24 +08:00
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
2016-04-22 14:52:19 +08:00
## API
To get a customized button, just set `type` /`shape`/`size`/`loading`/`disabled`.
2017-10-25 10:25:44 +08:00
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
2018-06-24 17:09:18 +08:00
| disabled | disabled state of button | boolean | `false` |
2017-10-25 10:25:44 +08:00
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
2017-12-29 20:22:58 +08:00
| href | redirect url of link button | string | - |
2017-10-25 10:25:44 +08:00
| 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 of button, see: Icon component | string | - |
| loading | set the loading status of button | boolean \| { delay: number } | false |
| shape | can be set to `circle` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
2017-12-29 20:22:58 +08:00
| target | same as target attribute of a, works when href is specified | string | - |
2017-10-25 10:25:44 +08:00
| type | can be set to `primary` `ghost` `dashed` `danger` (added in 2.7) or omitted (meaning `default` ) | string | `default` |
2018-10-28 20:57:23 +08:00
| onClick | set the handler to handle `click` event | (event) => void | - |
2018-07-29 16:33:26 +08:00
| block | option to fit button width to its parent width | boolean | `false` |
2016-04-22 14:52:19 +08:00
2018-10-28 20:57:23 +08:00
It accepts all props which native button support.
2017-10-03 11:02:35 +08:00
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>` , and all the properties which are not listed above will be transferred to the `<button>` tag.
2016-04-22 14:52:19 +08:00
2017-11-29 11:20:22 +08:00
`<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>` .
2016-04-22 14:52:19 +08:00
< style >
2016-12-09 13:02:16 +08:00
[id^=components-button-demo-] .ant-btn {
2016-04-22 14:52:19 +08:00
margin-right: 8px;
margin-bottom: 12px;
}
2018-02-08 15:51:53 +08:00
[id^=components-button-demo-] .ant-btn-group > .ant-btn,
[id^=components-button-demo-] .ant-btn-group > span > .ant-btn {
2016-12-02 15:06:59 +08:00
margin-right: 0;
}
2016-04-22 14:52:19 +08:00
< / style >