logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Button

To trigger an operation.
Importimport { Button } from "antd";
Sourcecomponents/button
Docs
Edit this pageDesignChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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.

  • 🔵 Primary button: used for the main action, there can be at most one primary button in a section.
  • ⚪️ Default button: used for a series of actions without priority.
  • 🫥 Dashed button: commonly used for adding more actions.
  • 🔤 Text button: used for the most secondary action.
  • 🔗 Link button: used for external links.

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.

Examples

API

Common props ref:Common props

Different button styles generated by setting Button properties. The recommended order is: type -> shape -> size -> loading -> disabled.

PropertyDescriptionTypeDefaultVersion
autoInsertSpaceWe add a space between two Chinese characters by default, which removed by setting autoInsertSpace to false.booleantrue5.17.0
blockOption to fit button width to its parent widthbooleanfalse
classNamesSemantic DOM classRecord<SemanticDOM, string>-5.4.0
colorSet button colordefault | primary | danger | PresetColors-default, primary and danger: 5.21.0, PresetColors: 5.23.0
dangerSyntactic sugar. Set the danger status of button. will follow color if providedbooleanfalse
disabledDisabled state of buttonbooleanfalse
ghostMake background transparent and invert text and border colorsbooleanfalse
hrefRedirect url of link buttonstring-
htmlTypeSet the original html type of button, see: MDNsubmit | reset | buttonbutton
iconSet the icon component of buttonReactNode-
iconPositionSet the icon position of buttonstart | endstart5.17.0
loadingSet the loading status of buttonboolean | { delay: number, icon: ReactNode }falseicon: 5.23.0
shapeCan be used to set button shapedefault | circle | rounddefault
sizeSet the size of buttonlarge | middle | smallmiddle
stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-5.4.0
targetSame as target attribute of a, works when href is specifiedstring-
typeSyntactic sugar. Set button type. Will follow variant & color if providedprimary | dashed | link | text | defaultdefault
onClickSet the handler to handle click event(event: React.MouseEvent<HTMLElement, MouseEvent>) => void-
variantSet button variantoutlined | dashed | solid | filled | text | link-5.21.0

It accepts all props which native buttons support.

PresetColors

type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
borderColorDisabledBorder color of disabled buttonstring#d9d9d9
contentFontSizeFont size of button contentnumber14
contentFontSizeLGFont size of large button contentnumber16
contentFontSizeSMFont size of small button contentnumber14
contentLineHeightLine height of button contentnumber1.5714285714285714
contentLineHeightLGLine height of large button contentnumber1.5
contentLineHeightSMLine height of small button contentnumber1.5714285714285714
dangerColorText color of danger buttonstring#fff
dangerShadowShadow of danger buttonstring0 2px 0 rgba(255,38,5,0.06)
defaultActiveBgBackground color of default button when activestring#ffffff
defaultActiveBorderColorBorder color of default button when activestring#0958d9
defaultActiveColorText color of default button when activestring#0958d9
defaultBgBackground color of default buttonstring#ffffff
defaultBorderColorBorder color of default buttonstring#d9d9d9
defaultColorText color of default buttonstringrgba(0,0,0,0.88)
defaultGhostBorderColorBorder color of default ghost buttonstring#ffffff
defaultGhostColorText color of default ghost buttonstring#ffffff
defaultHoverBgBackground color of default button when hoverstring#ffffff
defaultHoverBorderColorBorder color of default buttonstring#4096ff
defaultHoverColorText color of default button when hoverstring#4096ff
defaultShadowShadow of default buttonstring0 2px 0 rgba(0,0,0,0.02)
fontWeightFont weight of textundefined | FontWeight400
ghostBgBackground color of ghost buttonstringtransparent
groupBorderColorBorder color of button groupstring#4096ff
linkHoverBgBackground color of link button when hoverstringtransparent
onlyIconSizeIcon size of button which only contains iconstring | numberinherit
onlyIconSizeLGIcon size of large button which only contains iconstring | numberinherit
onlyIconSizeSMIcon size of small button which only contains iconstring | numberinherit
paddingBlockVertical padding of buttonundefined | PaddingBlock<string | number>4
paddingBlockLGVertical padding of large buttonundefined | PaddingBlock<string | number>7
paddingBlockSMVertical padding of small buttonundefined | PaddingBlock<string | number>0
paddingInlineHorizontal padding of buttonundefined | PaddingInline<string | number>15
paddingInlineLGHorizontal padding of large buttonundefined | PaddingInline<string | number>15
paddingInlineSMHorizontal padding of small buttonundefined | PaddingInline<string | number>7
primaryColorText color of primary buttonstring#fff
primaryShadowShadow of primary buttonstring0 2px 0 rgba(5,145,255,0.1)
solidTextColorDefault text color for solid buttons.string#fff
textHoverBgBackground color of text button when hoverstringrgba(0,0,0,0.04)
textTextActiveColorDefault text color for text buttons on activestringrgba(0,0,0,0.88)
textTextColorDefault text color for text buttonsstringrgba(0,0,0,0.88)
textTextHoverColorDefault text color for text buttons on hoverstringrgba(0,0,0,0.88)
Global TokenHow to use?

FAQ

How to choose type and color & variant?

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.

jsx
<Button type="primary">click</Button>

Equivalent

jsx
<Button color="primary" variant="solid">
click
</Button>

How to close the click wave effect?

If you don't need this feature, you can set disabled of wave in ConfigProvider as true.

jsx
<ConfigProvider wave={{ disabled: true }}>
<Button>click</Button>
</ConfigProvider>
Syntactic sugar

Through the type syntactic sugar, use the preset button styles: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Icon

You can add an icon using the icon property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Size

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loading

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Ghost Button

The ghost property will make a button's background transparent, this is commonly used in colored background.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Block Button

The block property will make a button fit to its parent width.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Color & Variant

You can set the color and variant attributes at the same time can derive more variant buttons.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0
Icon Position

You can set the position of a button's icon by setting the iconPosition to start or end respectively.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.17.0
Disabled

To mark a button as disabled, add the disabled property to the Button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Multiple Buttons

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Danger Buttons

The danger is a property of buttons after antd 4.0.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Gradient Button

Buttons with a gradient background.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Preview
Preview
Href PrimaryHref Primary(disabled)
  • icon
    5.5.0
    Icon element