Button

Buttons are used to help users perform common actions more easily and direct them through a workflow.

Types

Link buttons: use the <a> tag for buttons that direct the user to a new page, ie. for buttons that are links. They should also be used for buttons that default to a link when javascript fails or is switched off, eg. a play video button that opens a YouTube video in a modal or if JS fails takes vistor to the YouTube video page.

Button tag: use the <button> tag for buttons that will be used to make changes on a page via javascript and do not take the viewer to a new page.

Form buttons: use standard form buttons <input type=""> in forms.

Styles

Buttons have an underline on hover in order to address WCAG2.0 Criterion 1.4.1
Buttons are sentence case for best readability.

Icons

Any of the icons in the icon set can be used with a button by including the class ds-icon-[icon-name]. Where icon-name is the name listed on the icons page.

To place the icon on the left also include the class ds-icon--before

ready

Base button

<div class="ds-block">

    <a class="ds-btn" href="#">Button (link)</a>
    <button class="ds-btn">Button (button)</button>
    <button class="ds-btn" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn ds-icon-chevron-right">Button (button)</button>
    <button class="ds-btn ds-icon-chevron-left ds-icon--before">Button (button)</button>

</div>

ready

The primary button style is used for primary actions. Only one of these types of buttons should be used in each view (ie block).

<div class="ds-block">

    <a class="ds-btn-primary" href="#">Button</a>
    <button class="ds-btn-primary">Button (button)</button>
    <button class="ds-btn-primary" disabled>Button (button disabled)</button>
    <button class="ds-btn-primary ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-primary ds-icon-chevron-down ds-icon--before">Button (button)</button>

</div>

ready

The secondary button style is used for secondary actions. They are often used next to primary buttons or elsewhere on a page for secondary actions.

<div class="ds-block">

    <a class="ds-btn-secondary" href="#">Button</a>
    <button class="ds-btn-secondary">Button (button)</button>
    <button class="ds-btn-secondary" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn-secondary ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-secondary ds-icon-chevron-down ds-icon--before">Button (button)</button>

</div>

ready

Button looks like link

<div class="ds-block">

    <p>
        <a class="ds-btn-link" href="#">Button (a tag)</a>
        <a class="ds-btn-link"  href="#" disabled>Button (a tag disabled)</a>
        <button class="ds-btn-link">Button (button)</button>
        <button class="ds-btn-link" disabled>Button (button disabled)</button>
    </p>

    <!-- with icons -->
    <p>
        <a class="ds-btn-link ds-icon-coffee" href="#">Button (a tag)</a>
        <button class="ds-btn-link ds-icon-edit">Button (button)</button>
        <button class="ds-btn-link ds-icon-chevron-right" href="#" disabled>Button (button disabled)</button>
        <button class="ds-btn-link ds-icon-check">Button (button)</button>
    </p>

    <!-- with icons before -->
    <p>
        <a class="ds-btn-link ds-icon-coffee ds-icon--before" href="#">Button (a tag)</a>
        <button class="ds-btn-link ds-icon-edit ds-icon--before">Button (button)</button>
        <button class="ds-btn-link ds-icon-chevron-right ds-icon--before" href="#" disabled>Button (button disabled)</button>
        <button class="ds-btn-link ds-icon-check ds-icon--before">Button (button)</button>
    </p>

</div>

ready

Used within modals.

<div class="ds-block">

    <button class="ds-btn-round">+2</button>
    <button class="ds-btn-round ds-icon-x">Close</button>

</div>

Button modifiers

ready

A small button should be used for secondary actions. Pagination and card buttons should

<div class="ds-block">

    <a class="ds-btn ds-btn--small" href="#">Button</a>
    <a class="ds-btn-primary ds-btn--small" href="#">Button</a>
    <a class="ds-btn-secondary ds-btn--small" href="#">Button</a>
    <a class="ds-btn-round ds-btn--small ds-icon-plus" href="#">Button</a>
    <button class="ds-btn-round ds-btn--small">+2</button>

</div>

ready

<div class="ds-block">

    <a class="ds-btn ds-btn--small ds-icon-chevron-right" href="#">Button</a>
    <a class="ds-btn ds-btn--small ds-icon-chevron-left ds-icon--before" href="#">Button</a>

    <br>

    <a class="ds-btn-primary ds-btn--small ds-icon-chevron-right" href="#">Button</a>
    <a class="ds-btn-primary ds-btn--small ds-icon-chevron-left ds-icon--before" href="#">Button</a>

    <br>

    <a class="ds-btn-secondary ds-btn--small ds-icon-chevron-right" href="#">Button</a>
    <a class="ds-btn-secondary ds-btn--small ds-icon-chevron-left ds-icon--before" href="#">Button</a>

</div>

ready

Light buttons can be used on dark or image backgrounds.

<div class="ds-block">

    <a class="ds-btn ds-btn--light" href="#">Button (link)</a>
    <button class="ds-btn ds-btn--light">Button (button)</button>
    <button class="ds-btn ds-btn--light" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn ds-btn--light ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn ds-btn--light ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn-primary ds-btn--light" href="#">Button (link)</a>
    <button class="ds-btn-primary ds-btn--light">Button (button)</button>
    <button class="ds-btn-primary ds-btn--light" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn-primary ds-btn--light ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-primary ds-btn--light ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn-secondary ds-btn--light" href="#">Button (link)</a>
    <button class="ds-btn-secondary ds-btn--light">Button (button)</button>
    <button class="ds-btn-secondary ds-btn--light" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn-secondary ds-btn--light ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-secondary ds-btn--light ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn ds-btn--light ds-btn--small" href="#">Button (link)</a>
    <button class="ds-btn ds-btn--light ds-btn--small">Button (button)</button>
    <button class="ds-btn ds-btn--light ds-btn--small" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn ds-btn--light ds-btn--small ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn ds-btn--light ds-btn--small ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn-primary ds-btn--light ds-btn--small" href="#">Button (link)</a>
    <button class="ds-btn-primary ds-btn--small ds-btn--light">Button (button)</button>
    <button class="ds-btn-primary ds-btn--small ds-btn--light" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn-primary ds-btn--small ds-btn--light ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-primary ds-btn--small ds-btn--light ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn-secondary ds-btn--light ds-btn--small" href="#">Button (link)</a>
    <button class="ds-btn-secondary ds-btn--light ds-btn--small">Button (button)</button>
    <button class="ds-btn-secondary ds-btn--light ds-btn--small" href="#" disabled>Button (button disabled)</button>
    <button class="ds-btn-secondary ds-btn--light ds-btn--small ds-icon-chevron-down">Button (button)</button>
    <button class="ds-btn-secondary ds-btn--light ds-btn--small ds-icon-chevron-down ds-icon--before">Button (button)</button>
    <br>
    <a class="ds-btn-round ds-btn--light ds-icon-plus" href="#">Button</a>
    <button class="ds-btn-round ds-btn--light">+2</button>

</div>

ready

Using the ds-btn--icon-only will make the button text hidden

Always include the text for screen readers.

<div class="ds-block">

    <button class="ds-btn-primary ds-icon-search ds-btn--icon-only">Button (button)</button>
    <button class="ds-btn-primary ds-icon-search ds-icon--before  ds-btn--icon-only">Button (button)</button>

</div>

ready

Using the ds-btn--icon-only-mobile will make the button text hidden on small screens (< 768px viwports)

<div class="ds-block">

    <button class="ds-btn-primary ds-icon-search ds-btn--icon-only-mobile">Search</button>
    <button class="ds-btn-primary ds-icon-search ds-icon--before  ds-btn--icon-only-mobile">Search</button>

</div>

Form buttons

ready

<div class="ds-block">

    <input type="button" value="Button">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    
    <br>
    <!-- small -->
    <input class="ds-btn--small" type="button" value="Button">
    <input class="ds-btn--small" type="submit" value="Submit">
    <input class="ds-btn--small" type="reset" value="Reset">

</div>

Button

Types

Styles

Icons

Button

Primary

Secondary

Button link

Round

Button modifiers

Small

Small with icon

Light

Button with icon - with modifier `ds-btn--icon-only`

Button with icon - with modifier `ds-btn--icon-only-mobile`

Form buttons

Input button

Button

Types

Styles

Icons

Button

Primary

Secondary

Button link

Round

Button modifiers

Small

Small with icon

Light

Button with icon - with modifier ds-btn--icon-only

Button with icon - with modifier ds-btn--icon-only-mobile

Form buttons

Input button

Button with icon - with modifier `ds-btn--icon-only`

Button with icon - with modifier `ds-btn--icon-only-mobile`