Button

Button label should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Primary, secondary, tertiary, danger primary and danger tertiary button follows the same structure measurements. A button cannot have label or any element within 16 pixels / 1 rem of its borders. For a button with an icon, the space between the button label and the icon must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with icons appear together.

Ghost and danger ghost button follow the same structure measurements.

The following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.

For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside.

There are six button sizes: small, medium, large productive, large expressive, extra large, and 2XL. The large expressive button is used in editorial and digital marketing experiences. See Button sizes on the Usage tab for more information about specific use cases for each button size.

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.