Button

Interface of Button
🏗 Coming Soon

Button Styles

Button

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.

ButtonOutline

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.

ButtonTransparent

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

Colors

Buttons come in three color variants: key, critical, and neutral.

Key

Key is the primary brand color, which is the default setting.

Critical

Critical Buttons are to be used in situations where you need to convey some very important, potentially irreversible consequence of pressing this button.

Neutral

Neutral buttons are meant to fade into the background. These are usually used for secondary, nonessential, actions.

Size

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.



Full Width

Use the fullWidth property on a <Button /> and it will set its width to 100%.

Disabled

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 iconBefore and 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.

Extending Button

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;
`