Use a default button for the most frequently used action or most important action on a page. Default buttons should only appear once on a page. They are sometimes accompanied by a secondary button.
Use an outline button alongside a default button to provide alternative actions on a page. Outline buttons should only appear alongside default buttons for secondary actions. Use no more than two secondary buttons on a page.
Use a transparent button as a tertiary action on a screen, they are often used as a Cancel button on a form. Typically it performs the opposite action of a default button
Buttons come in three color variants:
Key is the primary brand color, which is the default setting.
Critical Buttons are to be used in situations where you need to convey some very important, potentially irreversible consequence of pressing this button.
Neutral buttons are meant to fade into the background. These are usually used for secondary, nonessential, actions.
Use the size property on a
<Button /> to modify the size the button rendered. You can combine it with the
mode property to get the correct style and size of button you need.
fullWidth property on a
<Button /> and it will set its width to 100%.
Use a disabled button to indicate to the user what action will be possible on a page once a prerequisite action is taken. Disabled buttons do not respond to user interaction.
Button with an Icon
Buttons can have an icon before or after their content, using the
iconAfter property. Each property accepts the name of an icon
Additional Action Considerations
When a call to action requires additional steps, include an ellipsis at the end of the button text as a visual clue. This helps reinforce that there are additional steps that can take place before the action takes effect.
Sometimes you may want to extend the Button defaults to create a specific styling effect. That should be straightforward by wrapped a StyledComponent in another
styled call to extend it like so:
const RoundButton = styled(Button)`border-radius: 2rem;`