Button
Button
To trigger an operation.
Importimport{ Button }from"antd"; |
Sourcecomponents/button |
DocsEdit this page |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Button }from"antd"; |
Sourcecomponents/button |
DocsEdit this page |
A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.
In Ant Design we provide 5 types of button.
And 4 other properties additionally.
danger: used for actions of risk, like deletion or authorization.ghost: used in situations with complex background, home pages usually.disabled: used when actions are not available.loading: adds a loading spinner in button, avoids multiple submits too.Common props ref：Common props
Different button styles can be generated by setting Button properties. The recommended order is: type -> shape -> size -> loading -> disabled.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting autoInsertSpace to false. | boolean | true | 5.17.0 |
| block | Option to fit button width to its parent width | boolean | false | |
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.4.0 |
| danger | Set the danger status of button | boolean | false | |
| 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 | string | button | |
| icon | Set the icon component of button | ReactNode | - | |
| iconPosition | Set the icon position of button | start | end | start | 5.17.0 |
| loading | Set the loading status of button | boolean | { delay: number } | false | |
| shape | Can be set button shape | default | circle | round | default | |
| size | Set the size of button | large | middle | small | middle | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Set button type | primary | dashed | link | text | default | default | |
| onClick | Set the handler to handle click event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
It accepts all props which native buttons support.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| borderColorDisabled | Border color of disabled button | string | #d9d9d9 |
| contentFontSize | Font size of button content | number | 14 |
| contentFontSizeLG | Font size of large button content | number | 16 |
| contentFontSizeSM | Font size of small button content | number | 14 |
| contentLineHeight | Line height of button content | number | 1.5714285714285714 |
| contentLineHeightLG | Line height of large button content | number | 1.5 |
| contentLineHeightSM | Line height of small button content | number | 1.5714285714285714 |
| dangerColor | Text color of danger button | string | #fff |
| dangerShadow | Shadow of danger button | string | 0 2px 0 rgba(255, 38, 5, 0.06) |
| defaultActiveBg | Background color of default button when active | string | #ffffff |
| defaultActiveBorderColor | Border color of default button when active | string | #0958d9 |
| defaultActiveColor | Text color of default button when active | string | #0958d9 |
| defaultBg | Background color of default button | string | #ffffff |
| defaultBorderColor | Border color of default button | string | #d9d9d9 |
| defaultColor | Text color of default button | string | rgba(0, 0, 0, 0.88) |
| defaultGhostBorderColor | Border color of default ghost button | string | #ffffff |
| defaultGhostColor | Text color of default ghost button | string | #ffffff |
| defaultHoverBg | Background color of default button when hover | string | #ffffff |
| defaultHoverBorderColor | Border color of default button | string | #4096ff |
| defaultHoverColor | Text color of default button when hover | string | #4096ff |
| defaultShadow | Shadow of default button | string | 0 2px 0 rgba(0, 0, 0, 0.02) |
| fontWeight | Font weight of text | undefined | FontWeight | 400 |
| ghostBg | Background color of ghost button | string | transparent |
| groupBorderColor | Border color of button group | string | #4096ff |
| linkHoverBg | Background color of link button when hover | string | transparent |
| onlyIconSize | Icon size of button which only contains icon | number | 16 |
| onlyIconSizeLG | Icon size of large button which only contains icon | number | 18 |
| onlyIconSizeSM | Icon size of small button which only contains icon | number | 14 |
| paddingBlock | Vertical padding of button | undefined | PaddingBlock<string | number> | 4 |
| paddingBlockLG | Vertical padding of large button | undefined | PaddingBlock<string | number> | 7 |
| paddingBlockSM | Vertical padding of small button | undefined | PaddingBlock<string | number> | 0 |
| paddingInline | Horizontal padding of button | undefined | PaddingInline<string | number> | 15 |
| paddingInlineLG | Horizontal padding of large button | undefined | PaddingInline<string | number> | 15 |
| paddingInlineSM | Horizontal padding of small button | undefined | PaddingInline<string | number> | 7 |
| primaryColor | Text color of primary button | string | #fff |
| primaryShadow | Shadow of primary button | string | 0 2px 0 rgba(5, 145, 255, 0.1) |
| textHoverBg | Background color of text button when hover | string | rgba(0, 0, 0, 0.06) |
If you don't need this feature, you can set disabled of wave in ConfigProvider as true.
<ConfigProvider wave={{ disabled: true }}><Button>click</Button></ConfigProvider>
There are five type of buttons in antd, namely they are: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.
You can set the position of a button's icon by setting the iconPosition to start or end respectively.
To mark a button as disabled, add the disabled property to the Button.
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a Dropdown.Button.
The danger is a property of buttons after antd 4.0.
Buttons with a gradient background.
You can add an icon using the icon property.
Ant Design supports three sizes of buttons: small, default and large.
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.
A loading indicator can be added to a button by setting the loading property on the Button.
The ghost property will make a button's background transparent, this is commonly used in colored background.
The block property will make a button fit to its parent width.
