Button
Button
To trigger an operation.
Importimport{ Button }from"antd"; |
Sourcecomponents/button |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 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 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 |
| color | Set button color | default | primary | danger | - | 5.21.0 |
| danger | Syntactic sugar. Set the danger status of button. will follow color if provided | 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 | submit | reset | button | 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 used to 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 | Syntactic sugar. Set button type. Will follow variant & color if provided | primary | dashed | link | text | default | default | |
| onClick | Set the handler to handle click event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | Set button variant | outlined | dashed | solid | filled | text | link | - | 5.21.0 |
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) |
| solidTextColor | Default text color for solid buttons. | string | #fff |
| textHoverBg | Background color of text button when hover | string | rgba(0, 0, 0, 0.04) |
| textTextActiveColor | Default text color for text buttons on active | string | rgba(0, 0, 0, 0.88) |
| textTextColor | Default text color for text buttons | string | rgba(0, 0, 0, 0.88) |
| textTextHoverColor | Default text color for text buttons on hover | string | rgba(0, 0, 0, 0.88) |
Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
<Button type="primary">click</Button>
Equivalent
<Button color="primary" variant="solid">click</Button>
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>
Through the type syntactic sugar, use the preset button styles: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.
Debug usage
You can set the position of a button's icon by setting the iconPosition to start or end respectively.
Debug usage
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.
Debug usage
Component Token. Button with MUI style.
You can set the color and variant attributes at the same time can derive more variant buttons.
You can add an icon using the icon property.
Debug usage
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.
Buttons with a gradient background.
