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 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 |
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 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.06) |
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>