Button Style

Done

Buttons allow users to do something on the page. They 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:

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.
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.

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);
}