Buttons
Last updated
Was this helpful?
LAMBDA_LABS_Family_Promise
Last updated
Was this helpful?
To trigger an operation.
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.
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.
Different button styles can be generated by setting Button properties. The recommended order is: type -> shape -> size -> loading -> disabled.
block
Option to fit button width to its parent width
boolean
false
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
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
target
Same as target attribute of a, works when href is specified
string
-
type
Can be set to primary ghost dashed link text default
string
default
onClick
Set the handler to handle click event
(event) => void
-
It accepts all props which native buttons support.
Primary ButtonDefault ButtonDashed Button Text ButtonLink Button
Set the original html type of button, see:
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 to set autoInsertSpaceInButton as false.
