Button Style
- Derek Matthew
- Sara Greenwood
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
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;
}
}