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 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
: when actions are not available.loading
: add loading spinner in button, avoiding 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 |
---|---|---|---|---|
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 | - | |
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: 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>
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use ConfigProvider to set autoInsertSpaceInButton
as false
.
<ConfigProvider autoInsertSpaceInButton={false}><Button>按钮</Button></ConfigProvider>