Page Comparison

...

Buttons allow users to do something on the page.  Image RemovedThey are not meant for links to navigation to another page.

Buttons versus Links

• Buttons are used for actions "Submit", "Next", "Previous", "Cancel", "Find"

• Links are used for navigation and usually appear within or following a sentence.

...

Types of buttons:

• Default
• Primary
• Cancel/Destructive
  

Primary Button:
Identifies the Button that the user must click to *continue* or *save* data.

There should only be at most one Primary (btn-primary) action button on a page; the goal is to guide the user to the preferred action.

Uses the btn-primary style

Cancel / Destructive Button:
Identifies the Button that if the User clicked the user entered data would be deleted, reverted to a previous version

Uses btn-cancel style.

Default:
Identifies any other button that is not Primary or Destructive

Uses btn-cancel style

Button Names

• Buttons are an action, so always lead with a verb

• To provide context, buttons should use {verb} + {noun}, example "Find Location"

• Where context is clear, a single verb may be used, such as within a form, "Next" and "Previous" do not require a noun. Aria-labels may add additional context for screen readers.

• Button text is written in title case.

Common Names

• Search

• Find Location

• Next / Continue

• Back / Previous

• Submit {Noun} 

• Cancel

Icons with buttons

Using icons inside a button are not part of the standard. There are exemptions for certain buttons, so the rules for use are documented here. New buttons should not use icons.

• When icons are used, it should be combined with the button name and icons should be to the left of the name.

  Image Added

• Icons should very rarely be on their own; an exception is where space is limited and an icon is recognizable in it’s function. Screen reader only text (or an Aria-Label) must be applied.

  Image Added

Accessibility

• Buttons and Links

Button CSS

CSS Variables

Note: the values may change overtime, for latest values refer to Design Tokens (CSS Variables)

--font-size-default : 14px;
--color-focus: #E77600;
--border-radius : 4px;

--color-text-white : #ffffff

--color-primary-light: #337ab7;
--color-primary: #165788;
--color-primary-dark: #{$base};

--color-default: #6e787c;
--color-default-dark: #596063;

--color-cancel: #88161f;
--color-cancel-dark: #6e1219;

All Buttons

.button

display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background: transparent;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: var(--font-size-default);
line-height: 1.42857143;
border-radius: var(--border-radius);
user-select:none;
@extend %focus;

Default Button

.button--default

border: 1px solid var(--color-default);
background-color: var(--color-white);
color: var(--color-default);

 &:hover:hover{
    border-color: var(--color-default);
    background-color: var(--color-default);
    color: var(--color-text-white);
 }

 &:active, &[aria-pressed="true"]{
    @extend %pressed;
    background-color: var(--color-default-dark);
    color: var(--color-text-white);
 }

 &:disabled, &[aria-disabled="true"]{
    pointer-events: none;
    opacity: 0.4;
 }

 &:focus{
   border: 3px solid var(--color-focus);
   background: var(--color-focus);
   color: var(--color-text-white);

   &:hover{
     background: initial;
   }
 }

Primary Button

.button--primary

background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-white);

&[aria-pressed="true"]{
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
}

&:disabled, &[aria-disabled="true"]{
    pointer-events: none;
    opacity: 0.4;
}

&:hover:hover, &:active{
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

Cancel Button

.button--cancel

background-color: var(--color-white);
border-color: var(--color-cancel);
color: var(--color-cancel);   

&[aria-pressed="true"]{
    background-color: var(--color-cancel-dark);
    color: var(--color-text-white);
}

&:disabled, &[aria-disabled="true"]{
    pointer-events: none;
    opacity: 0.4;
}

&:hover:hover, &:active{
    border-color: var(--color-cancel);
    background-color: var(--color-cancel);
    color: var(--color-text-white);
}

...