Components

Buttons

Common to nearly every page and form, buttons are critical to every application. The buttons shown below are terminal buttons. We will be adding different kinds of buttons as the pattern library grows so stay tuned.

Quick look

A few things to keep in mind when using buttons:

  1. Buttons are used for terminal actions only.
  2. Secondary buttons are always located to the right of a primary button.
  3. See "Forms" and "Modals" sections for more information about specific rules on button usage.

Try it out

Primary button

Primary buttons are used for the most common terminal action on a form/page. Try focusing, hovering and activating the button.

Primary disabled

This is the primary button's disabled state. Typically this is used when the primary action on the form/page needs a set of requirements satiated until the user can progress.

Secondary button

Secondary buttons are used for the next more common terminal action(s) on a form/page. Try focusing, hovering and activating the button.

Secondary disabled

This is the secondary button's disabled state. Typically this is used when the secondary action on the form/page needs a set of requirements satiated until the user can use it.

Code samples

<button class="dqpl-button-primary" type="button">PRIMARY</button>
<button class="dqpl-button-primary dqpl-disabled" type="button" aria-disabled="true" disabled="disabled">PRIMARY DISABLED</button>
<button class="dqpl-button-secondary" type="button">SECONDARY</button>
<button class="dqpl-button-secondary dqpl-disabled" type="button" aria-disabled="true" disabled="disabled">SECONDARY DISABLED</button>

For more information on implementation read thewiki.