“Buttons” Component

Design: zeplin.

Buttons are used for actions that a user can perform on a page. Unlike text links, buttons should not be used solely for navigational purposes. A button might bring a user to a new page to start a user flow, for instance, but it should not be used just to link to another page.

Button Labels

Button labels should always start with a verb (e.g. “Save changes”), to indicate its action-oriented purpose.
Avoid generic labels like “Submit”—the button label should adequately describe the action that the user will perform.
Button labels should always contain text. Don’t use icon-only button labels, because icons are subject to interpretation. Exceptions apply to rare cases where an icon is well-recognized, e.g. on the toolbar of a rich text editor.
Button labels should follow sentence-case capitalization where the first word and proper nouns are capitalized.
Button labels should be as short as possible—3 words or fewer.
For buttons that confirm an action—e.g. to delete a payment method or generate a Course Certificate—the label should always be explicit. For instance, instead of “Yes” or “Ok”, it should say “Delete payment method”.
Button labels should be in the first person: for instance, “Submit my answer”.

Icons in Button Labels

Icons can be used to complement text in a button label. Often, this helps users quickly identify the function of a button.
Icons should have the right size (see Iconography).
Icons should be placed on the left of the text—the exception is for buttons with chevrons, where the chevron icon is placed on the right of the text.

Common Uses

Button Type	Use
Primary	For calls to action on a page
Primary with chevron	Used to indicate primary actions along multi-step flows
Large primary	Used sparingly to call great attention to an action
Large primary with chevron	Used sparingly to call great attention to initiate a multi-step flow
Dropdown	Used sparingly to group actions into a dropdown button
Secondary	For secondary actions on a page
Warning	For actions with harmful consequences on user data, e.g. to delete user data or cancel a membership
Small	For interfaces with limited space
Ghost	For actions that should not take up prominence, e.g. in a modal dialog

Primary Button

Regular Primary Button

Primary Button with Chevron

Large Primary Button

Usage

<button class="button button--primary">Primary Button</button>
<button class="button button--primary" disabled>Primary Button Disabled</button>
<button class="button button--primary button--loading">Primary Button Loading</button>

<button class="button button--primary button--withArrow">
    Button with chevron
    <x-svg-icon name="chevron-right-bold" class="button__arrowIcon ml-tiny"/>
</button>

<button class="button button--primary button--large">
    Large Button
</button>

<button class="button button--primary button--large button--withArrow">
    Large Button with chevron
    <x-svg-icon name="chevron-right-bold" class="button__arrowIcon ml-tiny"/>
</button>

Dropdown button

Usage

@component('components.dropdownButton', ['uniqueId' => 'dropdownButtonSample', 'buttonInnerHTML' => 'dropdown button'])
    <li class="dropdown__item">
        <button role="menuitem">Member support</button>
    </li>

    <li class="dropdown__item">
        <button role="menuitem">Email notifier</button>
    </li>
@endcomponent

Secondary Button

Regular Button

Button Dark

Small Button

Small Dark Button

Usage

<button class="button button--secondary">Secondary Button</button>
<button class="button button--secondary" disabled>Secondary Button Disabled</button>
<button class="button button--secondary button--small">Secondary Button Small</button>
<button class="button button--secondary button--small button--secondaryDark">Secondary Button Small dark</button>

Warning button

Usage

<button class="button button--warning">Warning Button</button>
<button class="button button--warning" disabled>Warning Button Disabled</button>

Ghost Button

Regular Button

Dark Button

Usage

<button class="button button--ghost">Ghost Button</button>
<button class="button button--ghost" disabled>Ghost Button Disabled</button>
<button class="button button--ghost button--ghostDark">Ghost Button Dark</button>

Accessibility

<button> or <a> or element? The rule, in a nutshell, is pretty simple: use anchor only if it has a link, otherwise it should be a button. So, these examples are totally valid:

<a href="/home" class="button button--ghost">Press me</a>
<button class="link" type="button">Click me</button>

As for button element, we always recommend to specify a type: button or submit.