Button

To trigger an operation.

When To Use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In Namu Design we provide 5 types of button.

Primary button: indicate the main action, one primary button at most in one section.
Default button: indicate a series of actions without priority.
Dashed button: used for adding action commonly.
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: when actions are not available.
loading: add loading spinner in button, avoiding multiple submits too.

Examples

Type

There are primary button, default button, dashed button, text button and link button in antd.

Size

Namu Design supports a default button size as well as a large and small size.

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.

A loading indicator can be added to a button by setting the loading property on the Button.

Ghost Button

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

Block Button

block property will make the button fit to its parent width.

Icon

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.

Disabled

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

Multiple Buttons

If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button.

Danger Buttons

danger is a property of button after antd 4.0.

API

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.

`styles` and `classNames` attribute

Property	Description	Version
icon	set `icon`element	5.5.0

Design Token

Global Token

FAQ

How to remove space between 2 chinese characters?

Following the Namu 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.

When To Use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In Namu Design we provide 5 types of button.

Primary button: indicate the main action, one primary button at most in one section.

Default button: indicate a series of actions without priority.

Dashed button: used for adding action commonly.

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: when actions are not available.

loading: add loading spinner in button, avoiding multiple submits too.

API

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.

styles and classNames attribute

Property	Description	Version
icon	set `icon`element	5.5.0

ButtonChangelog

ButtonChangelog

When To Use

Examples

API

styles and classNames attribute

Design Token

Global Token

FAQ

How to remove space between 2 chinese characters?

When To Use

Examples

API

styles and classNames attribute

Design Token

Global Token

FAQ

How to remove space between 2 chinese characters?

Button

Button

`styles` and `classNames` attribute

`styles` and `classNames` attribute