BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Buttons

Buttons direct users to take action. Pre-defined button styles and actions for most use cases are shown below.

Structure

Alignment

For desktop, buttons are aligned in most instances to the left under the form fields or text.

button allignment

Understanding button hierarchy is essential to seamless user experience.

button structure

Primary

Primary buttons are used to initiate task completion for the primary purpose of the page or section, such as submitting a form. Buttons should use action oriented text and be appropriately placed within the context of use.

Two primary buttons should not be used at the same time within a single form.

When used in conjunction with a secondary button, the primary button is to the right of the secondary button.

Primary Button on White Background

On Load

Find out more

Rollover

Find out more

On Focus

Find out more
Hide Show CSS
                        
        .ml-button-primary{
        	box-sizing: content-box;
        	font-family: 'Noto Sans', sans-serif;
        	font-size: 14px;
        	text-transform: uppercase;
        	background-color: transparent;
        	text-decoration: none;
        	font-weight: bold;
        	border-radius: 2px;
        	padding: 12px 14px;
        	border: 0;
        	display: inline-block;
        }
        
        .ml-button-primary:hover, 
        .ml-button-primary:focus, 
        .hover.ml-button-primary{
        	text-decoration: underline;
        }
        
        .ml-button-primary:focus, 
        .focus.ml-button-primary{
        	outline-color: #333;
        	text-decoration: underline;
        }
        
        .focus.ml-button-primary{
        	box-shadow: 0 0 3px #333, 0 0 7px #333;
        }
        
        .ml-button-primary {
        	background-color: #007abc;
        	color: #fff;
        }
        
        .ml-button-primary:hover, 
        .ml-button-primary:focus,
        .ml-button-primary.hover,
        .ml-button-primary.focus {
        	background-color: #0061a0;
        }
        
        
        
                            
HideShow HTML
                                                <a href="#" class="ml-button-primary">Find out more</a>
                                                
                    

Primary Button on Dark Background

Dark background use should be limited to informative page callout or promotionals.

On Load

Find out more

Rollover

Find out more

On Focus

Find out more
HideShow CSS
                        
        
        .ml-button-primary-dark {
        	box-sizing: content-box;
        	font-family: 'Noto Sans', sans-serif;
        	font-size: 14px;
        	text-transform: uppercase;
        	background-color: transparent;
        	text-decoration: none;
        	font-weight: bold;
        	border-radius: 2px;
        	padding: 12px 14px;
        	border: 0;
        	display: inline-block;
        }
        
        
        .ml-button-primary-dark:hover, 
        .ml-button-primary-dark:focus, 
        .hover.ml-button-primary-dark{
        	text-decoration: underline;
        }
        
        
        .ml-button-primary-dark:focus,
        .focus.ml-button-primary-dark {
        	outline-color: #333;
        	text-decoration: underline;
        }
        
        
        .focus.ml-button-primary-dark{
        	box-shadow: 0 0 3px #333, 0 0 7px #333;
        }
        
        .ml-button-primary-dark {
        	color: #000;
        	background-color: #a4ce4e;
        }
        
        .ml-button-primary-dark:hover, 
        .ml-button-primary-dark:focus, 
        .ml-button-primary-dark.hover {
        	background-color: #B7DD58;
        }
        
        .ml-button-primary-dark.focus {
        	background-color: #B7DD58;
        }
        
        
                            
HideShow HTML
                                    <a href="#" class="ml-button-primary-dark">Find out more</a>
                                            
                  

Secondary

Secondary buttons are used to provide an alternative action for the user in conjunction with a primary button. They can also be used in a section of a page to allow user to complete a sub-task. An example of this would be when performing file upload as one part of a larger form.

Button CTA's should be action-based. Two secondary buttons should not be used at the same time within a form. Consider using text links as tertiary actions.

Secondary Button on White Background

On Load

Find out more

Rollover

Find out more

On Focus

Find out more
HideShow CSS
                        
         
        .ml-button-secondary{
        	box-sizing: content-box;
        	font-family: 'Noto Sans', sans-serif;
        	font-size: 14px;
        	text-transform: uppercase;
        	background-color: transparent;
        	text-decoration: none;
        	font-weight: bold;
        	border-radius: 2px;
        	padding: 12px 14px;
        	border: 0;
        	display: inline-block;
        }
        
        
        .ml-button-secondary:hover, 
        .ml-button-secondary:focus, 
        .hover.ml-button-secondary{
        	text-decoration: underline;
        }
        
        .ml-button-secondary:focus, 
        .focus.ml-button-secondary{
        	outline-color: #333;
        	text-decoration: underline;
        }
        
        
        .focus.ml-button-secondary{
        	box-shadow: 0 0 3px #333, 0 0 7px #333;
        }
        
        .ml-button-secondary {
        	background-color: #fff;
        	color: #007abc;
        	border: solid 2px #007abc;
        }
        
        .ml-button-secondary:focus, 
        .ml-button-secondary:hover, 
        .ml-button-secondary.hover, 
        .ml-button-secondary.focus {
        	background-color: #007abc;
        	color: #fff;
        }
        
        
                            
HideShow HTML
                                  <a href="#" class="ml-button-secondary">Find out more</a>
                                  
                    

Secondary Button on Dark Background

Dark background use should be limited to informative page callout or promotionals.

On Load

Find out more

Rollover

Find out more

On Focus

Find out more

HideShow CSS
                        
        
        .ml-button-secondary-dark {
        	box-sizing: content-box;
        	font-family: 'Noto Sans', sans-serif;
        	font-size: 14px;
        	text-transform: uppercase;
        	background-color: transparent;
        	text-decoration: none;
        	font-weight: bold;
        	border-radius: 2px;
        	padding: 12px 14px;
        	border: 0;
        	display: inline-block;
        }
        
        
        .ml-button-secondary-dark:hover, 
        .ml-button-secondary-dark:focus, 
        .hover.ml-button-secondary-dark {
        	text-decoration: underline;
        }
        
        .ml-button-secondary-dark:focus, 
        .focus.ml-button-secondary-dark {
        	outline-color: #333;
        	text-decoration: underline;
        }
         
        .focus.ml-button-secondary-dark {
        	box-shadow: 0 0 3px #333, 0 0 7px #333;
        }
        
        .ml-button-secondary-dark {
        	border: solid 2px #fff;
        	color: #fff;
        }
        
        .ml-button-secondary-dark:focus, 
        .ml-button-secondary-dark:hover, 
        .ml-button-secondary-dark.hover, 
        .ml-button-secondary-dark.focus {
        	background-color: #fff;
        	color: #007abc;
        }
        
                            
HideShow HTML
                                  <a href="#" class="ml-button-secondary-dark">Find out more</a>
                                  
                    

Disabled

Disabled buttons should be used sparingly.

UX Best Practice: All buttons on a page should be enabled. When clicked, if all criteria for a button action have not been met, then error messaging should appear to communicate which requirements need attention.

There are exceptions when a disabled button may need to be used. A proper usage of disabled buttons would be a case where a user needs to act in order to proceed in application. (e.g. Consent forms).

Additional copy must accompany the usage of these types of buttons, informing the user of the action they need to perform in order to make the button enabled and allowing them to proceed.

On Load

Find out more

Rollover

Find out more

On Focus

Find out more
HideShow CSS
                        
         
    .ml-button-disabled{
	box-sizing: content-box;
	font-family: 'Noto Sans', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	background-color: transparent;
	text-decoration: none;
	font-weight: bold;
	border-radius: 2px;
	padding: 12px 14px;
	border: 0;
	display: inline-block;
}
.ml-button-disabled,  .ml-button-disabled:hover, .ml-button-disabled:focus, .focus.ml-button-disabled
{
	background-color: #D9D9D9;
	color: #333;
	cursor: not-allowed;
}
        
        
                            
HideShow HTML
                                  <a href="" class="ml-button-disabled">Find out more</a>
                                  
                    

Viewport Rules

  • • When used in conjunction with a secondary button, the primary button is to the right of the secondary button.
  • • When collapsing buttons down to a single column, the primary button appears first before the secondary button.
Example: Desktop/Tablet
table type 2




Example: Tablet/Mobile
table type 2

Sizes

Buttons have a minimum and maximum button size with padding constraints.

button size

When the copy exceeds the maximum width of a button (more common in languages that are lengthy), the majority of the content is pulled out and used as a header to ensure the button stays short and actionable.

button spacing