Button - Ant Design — ContextQMD

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

<code src="./demo/basic.tsx">Syntactic sugar</code> <code src="./demo/color-variant.tsx" version="5.21.0">Color & Variant</code> <code src="./demo/debug-color-variant" debug>Debug Color & Variant</code> <code src="./demo/icon.tsx">Icon</code> <code src="./demo/icon-placement.tsx" version="5.17.0">Icon Placement</code> <code src="./demo/debug-icon.tsx" debug>Debug Icon</code> <code src="./demo/debug-block.tsx" debug>Debug Block</code> <code src="./demo/size.tsx">Size</code> <code src="./demo/disabled.tsx">Disabled</code> <code src="./demo/loading.tsx">Loading</code> <code src="./demo/multiple.tsx">Multiple Buttons</code> <code src="./demo/ghost.tsx">Ghost Button</code> <code src="./demo/danger.tsx">Danger Buttons</code> <code src="./demo/block.tsx">Block Button</code> <code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code> <code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code> <code src="./demo/component-token.tsx" debug>Component Token</code> <code src="./demo/linear-gradient.tsx">Gradient Button</code> <code src="./demo/wave.tsx">Custom Wave</code> <code src="./demo/custom-disabled-bg.tsx">Custom disabled backgroundColor</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

API

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
autoInsertSpace	We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`.	boolean	`true`	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>	-
color	Set button color	`default` \| `primary` \| `danger` \| PresetColors	-	`default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.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, please use `iconPlacement` instead	`start` \| `end`	`start`	5.17.0
iconPlacement	Set the icon position of button	`start` \| `end`	`start`	-
loading	Set the loading status of button	boolean \| { delay: number, icon: ReactNode }	false	icon: 5.23.0
shape	Can be used to set button shape	`default` \| `circle` \| `round`	`default`
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>	-
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.

PresetColors

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

Semantic DOM

Design Token

FAQ

How to choose type and color & variant? {#faq-type-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? {#faq-close-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>