Button
Importimport{ Button }from"antd"; |
Sourcecomponents/button |
DocsEdit this page |
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>