Buttons

CSS file

Buttons are used for actions.

Primary Buttons

Use this for the primary action on a page.

Big 
<button type="button" class="sba-c-button sba-c-button--small">Small</button>
<button type="button" class="sba-c-button">Default</button>
<a class="sba-c-button  sba-c-button--big" href="javascript:void(0);">Big</a>

Inverse Buttons

Inverse buttons should be used when there is a secondary action that is very close to the primary action.

Big 
<button type="button" class="sba-c-button sba-c-button--inverse sba-c-button--small">Small</button>
<button type="button" class="sba-c-button sba-c-button--inverse">Default</button>
<a class="sba-c-button sba-c-button--inverse  sba-c-button--big" href="javascript:void(0);">Big</a>

Transparent Buttons

Buttons that more closely resemble a link

Big

Destructive Buttons

Big 
<button type="button" class="sba-c-button sba-c-button--small sba-c-button--danger">Small</button>
<button type="button" class="sba-c-button sba-c-button--danger">Default</button>
<a class="sba-c-button  sba-c-button--big sba-c-button--danger" href="javascript:void(0);">Big</a>

Success Buttons

Big 
<button type="button" class="sba-c-button sba-c-button--small sba-c-button--success">Small</button>
<button type="button" class="sba-c-button sba-c-button--success">Default</button>
<a class="sba-c-button  sba-c-button--big sba-c-button--success" href="javascript:void(0);">Big</a>

Disabled Buttons

Link 
<a href="javascript:void(0);" class="sba-c-button sba-c-button--disabled">Link</a>
<button disabled class="sba-c-button">Button</button>
<input disabled type="submit" class="sba-c-button" />

Buttons with Icons

  • Add an inline SVG icon and it will become the same color as the button text.
  • Use the margin utility class to add spacing between the icon and button text.
Delete 
<button class="sba-c-button">
  <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#download"></use>
  </svg>Left icon
</button>
<button class="sba-c-button sba-c-button--inverse">
  <svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#download"></use>
    </svg>Left icon
  </button>
  <button class="sba-c-button ds-c-button--primary">
Right icon <svg aria-hidden="true" class="sba-c-icon sba-u-margin-left--1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#arrow-right"></use>
    </svg>
</button>
<a class="sba-c-button  sba-c-button--big sba-c-button--danger" href="javascript:void(0);"><svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#trash"></use>
</svg>Delete</a>
<button type="button" class="sba-c-button sba-c-button--inverse sba-c-button--small"><svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#download"></use>
  </svg>Small</button>

Icon-only Buttons

<button class="sba-c-button sba-c-button--icon-only sba-c-button--transparent sba-u-color--error-dark" type="button" data-tooltip-text="Remove item">
  <svg aria-hidden="true" class="sba-c-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#trash">
</button>

Guidance

  • Use the "primary" button variation for the button most users should click. This is your primary call-to-action.
  • Avoid using too many buttons on a page. Aim to use only one button per page.
  • Avoid similar styles elsewhere on the page that could be confused for buttons.
  • Use buttons for the primary action and links for secondary actions.

Label text

  • Use sentence case for button labels.
  • Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “Save and continue,” “Download” or “Sign up”).
  • Make the first word of the button’s label a verb.
  • If a button has an icon, it should still have accompanying text describing the action.

Destructive Buttons

  • Use the "danger" button variation for destructive buttons. For example, buttons that delete or reset a user's information.
  • Confirm the user meant to trigger a destructive action before following through with the action.
  • If possible, provide a method for a user to undo a destructive action.

Disabled Buttons

  • Don’t disable buttons, unless there’s a good reason to.
  • Do not disable buttons to prevent incomplete form submission. Allow the user to make a mistake so the user can see the error message.
  • If you do disable a button, make sure it receives the disabled styling. A button element will automatically be styled as a disabled button when it has the disabled HTML attribute, but an a element will need to have the disabled modifier class applied to it.

Accessibility

  • Buttons should display a visible focus state when users tab to them.
  • Create a button with a button or a element to retain the native click functionality. Avoid using <div> or <img> tags to create buttons. Screen readers don't automatically know either is a usable button.
  • When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
  • Dimmed or unavailable buttons should have the disabled attribute applied. This removes native click and keypress events from the button. It also prevents automated scanners from logging a low contrast error. Finally, it announces the button as "dimmed" or "disabled" to screen readers, offering users additional context.

When to use

Use buttons for the most important actions you want users to take on your site, such as "Start application," "Sign up," or "Save and continue."

When to use something else

  • Less popular or less important actions may be visually styled as links.
  • Buttons are for performing actions, not making choices. If you need your users to make a choice, use something else like radio buttons. Alternatively, if one choice is much less important then try styling it as a link instead.