Importimport { Button } from "antd"; |
Sourcecomponents/button |
Importimport { Button } from "antd"; |
Sourcecomponents/button |
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 | PresetColors | - | default, primary and danger: 5.21.0, PresetColors: 5.23.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, icon: ReactNode } | false | icon: 5.23.0 |
| 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.
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
| 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 | string | number | inherit |
| onlyIconSizeLG | Icon size of large button which only contains icon | string | number | inherit |
| onlyIconSizeSM | Icon size of small button which only contains icon | string | number | inherit |
| 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.
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 loading.icon can be used to customize the loading icon.
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.
You can set the color and variant attributes at the same time can derive more variant 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.
