Button
A Button is used to trigger an action or event.
Basic
Used most in the interface. Only use another style if a button requires more or less visual weight.
Primary
Use to highlight the most important actions in any experience. Don’t use more than one primary button in a section or screen to avoid overwhelming users.
Minimal
Outline
Use against shaded or colorful backgrounds. An outline button will maintain the appropriate visual weight and won’t clash with the background color.
Plain
Use for less important or less commonly used actions since they’re less prominent. For example, plain buttons are used as actions in cards.
Button Sizes
Use when a table or list has a set of actions on each item to avoid making items taller than they need to be. Don’t use slim buttons for primary actions
Disabled State
Use for actions that aren’t currently available. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.
Loading State
Use when a button has been pressed and the associated action is in progress.
Button with icon
Icon only button
Disclosure Button
Use to indicate that multiple options are available from this control, similar to a select
HTML element.
Destructive
Use when the action will delete data or be otherwise difficult to recover from. Destructive buttons should trigger a confirmation dialog before the action is completed.
Props
-
type
'basic' | 'primary' | 'ghost' | 'outline' | 'plain'
Description
-
destructive
boolean
Indicates a dangerous or potentially negative action
-
size
'default' | 'slim' | 'large'
Changes the size of the button, giving it more or less padding
-
textAlign
'center' | 'left'
Changes the inner text alignment of the button
-
fullWidth
boolean
Allows the button to grow to the width of its container
-
disclosure
boolean | 'down' | 'up' | 'select'
Displays the button with a disclosure icon. Defaults to `down` when set to true
-
icon
any
Icon to display to the left of the button content
-
url
string
A destination to link to, rendered in the href attribute of a link
-
external
boolean
Forces url to open in a new tab
-
download
boolean
Tells the browser to download the url instead of opening it
-
submit
boolean
Allows the button to submit a form
-
disabled
boolean
Disables the button, disallowing user interaction
-
loading
boolean
Replaces button text with a spinner while a background action is being performed
-
pressed
boolean
Sets the button in a pressed state
-
accessibilityLabel
string
Visually hidden text for screen readers