Actions
Buttons
Buttons are one of the most important interactive components that connect & enable user flows. Buttons need to stand out and there can be different types of buttons. By default, button width is kept auto and gets changed as per its content but user can also change it as per the requirement which is shown below in Primary and Outline buttons together section
Types of buttons
Primary buttons
Outline buttons
Code Usage
Code Usage
Code Usage
Code Usage
Code Usage
Code Usage
Icons as large buttons
Icons as small buttons
Code Usage
Code Usage
States
Default state
Hover state
Selected state
Focus state
Down state
Disabled state
Buttons with Icon
20px, 16px and 12 px icons can be used with the three sizes for the buttons as shown below.
Annotation
Visual display
When buttons resize and if their width increases as per the variations above, the icon and the label spacing remains fixed as seen here and both will remain vertically center aligned.
Code Usage
Code Usage
Code Usage
Size & Scaling: Annotation
Button size L
Button size M
Button size S
The width of the primary & secondary buttons vary according to the word it encloses with the padding specs given above, however, there are a few variations. When buttons resize to varying breakpoints, they may adapt to their context. The layout also impacts the placement & alignment along with the width of the button. Key variations are documented as below
24px x 24px icons as buttons
16px x 16px icons as buttons
The minimum margin around the larger icon buttons should be 20px and 16px for small icon buttons. These can become the padding between two such icon buttons can
Primary and Outline buttons together
Here the buttons are all the same sizes decided by the shared space between columns in the gird system, such that the padding between the buttons is 16px and they occupy 3 columns and comfortably accommodate their labels. The 3 buttons are also aligned differently as the layout and functions. The two buttons on the right hand side expand for smaller breakpoints for the user's ease, giving more area to tap. Here the primary button is on top as it is the more important call to action here.
Code Usage
Labels
The content or text on the button should convey clearly where clicking on it would lead the user.Labels should be consist, concise and precise.
There can be use cases where the button color may not stand out or meet permissible color contrast for accessibility. The below options are prescribed for usage on dark or other backgrounds where Color A or Onyx 300 may not be suitable.
Stylistic Variations
There can be use cases where the button color may not stand out or meet permissible color contrast for accessibility. The below options are prescribed for usage on dark or other backgrounds where Color A or Onyx 300 may not be suitable.
Annotation
Visual display
Code Usage
Code Usage
Older buttons
Information
Buttons are used to bring the users attention to the element and click-through to the next step or page. Button text should be short and shouldn't be long, spanning over multiple lines; consider using links for these use-case scenarios.
There are a total of 4 different states for each of the buttons. These include:
- Default State
- Hover State
- Focus/Active State
- Disabled State
The examples below that display the states are mainly for content authors to visualize and understand. Each button structure between the themes are the same with the only difference being the classes that are set upon the <button> elements.
Legacy Styles
Visual Example
The main class for this theme is: .__mst_button
Default State
Hover State
Focus/Active
Disabled State
Code Usage
Default State
Hover State
Focus/Active State
Disabled State
Alternate Theme
Visual Example
The main class for this theme is: .__mst_button_alt
Default State
Hover State
Focus/Active
Disabled State
Code Usage
Default State
Hover State
Focus/Active State
Disabled State
Campaign Theme
Visual Example
The main class for this theme is: .__mst_button_campaign