Components
Button
- Overview
- Usage
Overview
Button vs Link
Button styling can be applied to either <button>
or <a>
elements.
Buttons are for actions that affect something on the current page, such as submitting a form, playing media, or closing a modal.
Links navigate to a new page or anchor location, changing the URL.
Variants
Primary
Primary buttons are used for the most important actions, for example saving, sending, submitting, registering etc. Try to use only one per section or screen.
Secondary
Secondary buttons are used for less important actions. You may use several per section or screen. They can be used independently or in a group with primary and/or tertiary buttons.
Tertiary
Tertiary buttons are used whenever an action doesn’t need to stand out (for example, cancel and dismiss functionalities). You may use several per section or screen. They can be used independently or in a group with primary and/or secondary buttons.
Neutral
Secondary and tertiary buttons have a neutral style option. This can be used for example in complex dashboards or data tables where less attention is called for. It is also the recommended option for pairing with danger button.
Danger
Danger buttons are used for emphasizing actions that can be destructive or have negative consequences if taken (for example, delete or remove). Use it sparingly.
Icon
Icon buttons are used for well-known and simple actions such as close, edit, delete etc and it should always have a tooltip. Icon buttons have color and neutral variant.
Touch dimensions
Icon buttons have at least 32 pixel touch dimensions to ensure ease of use and accessibility across different devices. When implementing icon buttons make sure there is enough space between the buttons and other elements to decrease the chance of accidentally pressing an incorrect target.
Size
Buttons are available in regular and compact size. Regular size should be used in most cases. Compact size can be used in tight spaces (for example, large data tables).
Loading state
Buttons can indicate that a quick progress action is taking place (e.g., saving settings on a server). In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.
Use the loading state for a button sparingly. It should be reserved only for when the progress is supposed to be quick (taking 5 seconds or less), and when there is no better way to communicate as such.
Use the attribute is-loading
or [loading] to enable the loading state.
Disabled state
Use the disabled state of a button when a user can't perform an action at the time of their experience.
They should be used sparingly and only for actions that they are unable to take.
The user shouldn't have to guess why a button is disabled.
It should be immediately obvious as to why the button might be disabled (e.g., an item can't be downloaded due to access). Otherwise, show the button in its default state, then provide helpful error text after it's been clicked.
To use disabled state for a button, add is-disabled
or [disabled] attribute.
Usage guidelines
Button text should describe what it does
Be specific about what the button does, while keeping it short and concise. Aim for a maximum of 3 words or 20 characters. Avoid unnecessary words and don’t include punctuation in button text.
Use sentence case
Only capitalize the first letter of the button and any proper nouns.
Use one primary call to action
Only include one primary button in a page or section. Having multiple primary buttons in one area can be confusing or visually overwhelming.