Button styling can be applied to either button or link elements. Use the appropriate element for the task: use a button element when the user is performing an action, use a link element when the user is navigating.
Types of button
Use this for your primary calls to action. Multiple primary buttons can confuse users. Try to have only one of these per page (or section of a page).
Any non-primary actions should use this inverted button style. It has less visual prominence than the primary button.
If a button is used to cancel or back out of an action, this more severe border style should be used.
Buttons in a disabled or unclickable state should be visually distinct and use this display.
Buttons will expand to fit the length of text by default
Use fixed-width buttons to force uniformity in button widths.
Use maximum-width buttons for large buttons. These will fill the width of small screens, up to a set maximum width (480px).
A small button style is available for cases where one is necessary, such as when you have a group of buttons.
The small button modifier can be applied to any type or width variant.
Buttons with icons
Icons can be added to buttons. Buttons with icons can also have any size, type or width modifiers applied to them.
The icons can be aligned to either side of the button.
Buttons can also contain only an icon. If you do this, make sure that the intention of the button is clearly communicated in a way that is accessible to users of assistive technology.
To track interactions with button elements in Google Analytics using Google Tag Manager, each button has a data attribute that describes the action.
The data attribute is added automatically by the Design System’s “tracking” script.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org