mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 03:54:28 +08:00
60da9909d3
* site: should generate html file for both of en and cn, ref: #3934 * site: remove loading animation * site: fix header menu highlight * site: improve detail * deps: update
38 lines
1.3 KiB
Markdown
38 lines
1.3 KiB
Markdown
---
|
|
category: Components
|
|
type: General
|
|
title: Button
|
|
---
|
|
|
|
To trigger an operation.
|
|
|
|
## When To Use
|
|
|
|
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
|
|
|
|
## API
|
|
|
|
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
|
|
|
Property | Description | Type | Default
|
|
-----|-----|-----|------
|
|
type | can be set to `primary` `ghost` `dashed` or omitted | string | -
|
|
htmlType | to set the original `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 | -
|
|
shape | can be set to `circle` or omitted | string | -
|
|
size | can be set to `small` `large` or omitted | string | `default`
|
|
loading | to set the loading status of button | boolean | false
|
|
onClick | set the handler to handle `click` event | function | -
|
|
|
|
`<Button>Hello world!</Button>` will be rendered into `<button>Hello world!</button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
|
|
|
|
<style>
|
|
[id^=components-button-demo-] .ant-btn {
|
|
margin-right: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
[id^=components-button-demo-] .ant-btn-group > .ant-btn {
|
|
margin-right: 0;
|
|
}
|
|
</style>
|