Search
Button

To trigger an operation.

Button

When to use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
In PCB Design system we provide 4 types of button: primary, secondary, primary links, secondary links.


Primary buttons

Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a modal dialog). Not every screen requires a primary button.
Toggle disabledToggle loading

Secondary buttons

Use a secondary button with a primary button for secondary actions, such as “Cancel".
Toggle disabledToggle loading
Use a primary link button to navigate to another page. These should open in the same window unless information may be lost (for example, when someone is filling out a form), or when the destination is an external site (for example, a knowledge base article).
Toggle disabledToggle loading
Similar to a secondary button, but behaves like a link button. Use a secondary link button to avoid overwhelming the page with red links.
Toggle disabledToggle loading

API

To get a customized button, just set type / shape / size / loading / disabled.
PropertyDescriptionTypeDefault
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 to circle, round or omitted
string
-
size
set the size of button
large | middle | small
target
same as target attribute of a, works when href is specified
string
-
type
can be set to primary ghost dashed danger link text
string
-
onClick
set the handler to handle click event
(event) => void
-
block
option to fit button width to its parent width
boolean
false
danger
set the danger status of button
boolean
false