Importimport { Button } from 'antd'; |
contributors
Importimport { Button } from 'antd'; |
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 | Global Config |
|---|---|---|---|---|---|
| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting autoInsertSpace to false. | boolean | true | 5.17.0 | 5.17.0 |
| block | Option to fit button width to its parent width | boolean | false | ||
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| color | Set button color | default | primary | danger | PresetColors | primary when variant="solid" | default, primary and danger: 5.21.0, PresetColors: 5.23.0, solid default color: 6.4.0 | 5.25.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 | - | ||
| iconPlacement | Set the icon position of button | start | end | start | - | |
Set the icon position of button, please use iconPlacement instead | start | end | start | 5.17.0 | ||
| loading | Set the loading status of button | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 | |
| loadingIcon | (Only supports global configuration) Set the loading icon of button | ReactNode | <LoadingOutlined /> | 6.3.0 | |
| onClick | Set the handler to handle click event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | ||
| shape | Can be used to set button shape | default | circle | round | default | 5.27.0 | |
| size | Set the size of button | large | medium | small | medium | ||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.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 | ||
| variant | Set button variant | outlined | dashed | solid | filled | text | link | - | 5.21.0 | 5.25.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 |
|---|---|---|---|
| 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 |
| dangerColor | Text color of danger button | string | #fff |
| dangerShadow | Shadow of danger button | string | 0 2px 0 rgba(255,38,5,0.06) |
| dashedBgDisabled | string | rgba(0,0,0,0.04) | |
| 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 |
| defaultBgDisabled | string | rgba(0,0,0,0.04) | |
| 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 | FontWeight | undefined | 400 |
| ghostBg | Background color of ghost button | string | transparent |
| iconGap | Gap between icon and text | Gap<string | number> | undefined | 8 |
| 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 |
| paddingInline | Horizontal padding of button | PaddingInline<string | number> | undefined | 15 |
| paddingInlineLG | Horizontal padding of large button | PaddingInline<string | number> | undefined | 15 |
| paddingInlineSM | Horizontal padding of small button | PaddingInline<string | number> | undefined | 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) |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorBgContainerDisabled | Control the background color of container in disabled state. | string | rgba(0,0,0,0.04) |
| colorBgSolid | Solid background color, currently only used for the default solid button background color. | string | rgb(0,0,0) |
| colorBgSolidActive | Solid background color active state, currently only used in the active effect of the default solid button. | string | rgba(0,0,0,0.95) |
| colorBgSolidHover | Solid background color hover state, currently only used in the hover effect of the default solid button. | string | rgba(0,0,0,0.75) |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorErrorActive | The active state of the error color. | string | #d9363e |
| colorErrorBg | The background color of the error state. | string | #fff2f0 |
| colorErrorBgActive | The active state background color of the error state. | string | #ffccc7 |
| colorErrorBgFilledHover | The wrong color fills the background color of the suspension state, which is currently only used in the hover effect of the dangerous filled button. | string | #ffdfdc |
| colorErrorHover | The hover state of the error color. | string | #ff7875 |
| colorFill | The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider. | string | rgba(0,0,0,0.15) |
| colorFillSecondary | The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc. | string | rgba(0,0,0,0.06) |
| colorFillTertiary | The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color. | string | rgba(0,0,0,0.04) |
| colorLink | Control the color of hyperlink. | string | #1677ff |
| colorLinkActive | Control the color of hyperlink when clicked. | string | #0958d9 |
| colorLinkHover | Control the color of hyperlink when hovering. | string | #69b1ff |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryActive | Dark active state under the main color gradient. | string | #0958d9 |
| colorPrimaryBg | Light background color of primary color, usually used for weak visual level selection state. | string | #e6f4ff |
| colorPrimaryBgHover | The hover state color corresponding to the light background color of the primary color. | string | #bae0ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| borderRadius | Border radius of base components | number | 6 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| controlHeightSM | SM component height | number | 24 |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| opacityLoading | Control the opacity of the loading state. | number | 0.65 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
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>