Button

Buttons are elements that allow a user to take an action.

General Guidelines

Buttons are used primarily for actions. Some examples include Add, Save, Delete, Cancel etc. Each page may have one primary button. Any remaining calls-to-action are represented as secondary buttons.

Voice and Tone

Buttons should be consolidated to a single word if possible to portray a specific action, like “Submit”. Make the call to action clear by leading with a strong verb that encourages action so the user can anticipate what will happen when they click. Be consistent among multiple buttons of the same type to avoid any confusion between similar actions and to encourage a confident atmosphere for the user. Buttons should be scannable so avoid using unecessary words and articles such as the, an, or a.

Grammar and Mechanics

  • Preferred character limit is 20 characters
  • Title case is always used for buttons

Usage

Variant Where and When
Primary For the primary, or most important call to action on the page
Secondary For secondary action(s) on the page
Ghost Use in dialogs where destructive actions or text links are needed
Decorator Where and When
With Icon used when context is needed to help guide the action, (I.e.destructive buttons, when the user is adding something; usually indicates modal or side panel will appear)
Full Width Used in narrow columns to keep consistency among multiple buttons and in side panels
Compressed Used within tables and/or lists to avoid making items taller than they need to be and in toolbars
Hidden Text Used when only needing an isolated icon to direct the user

Placement

There are two patterns in which we place our buttons.

The primary button should be on the right, with the secondary or cancel button on the left with 10px margin between the two. Buttons in wizards should be at the end of the form in the lower right hand corner of the page.

If a button is associated with a specific action located in a specific area on the page, then it should be located directly underneath the data/description corresponding to that action.

Variant Guidelines

State Where and When
Static The default state of the button when left alone on the screen
Focus When the user tabs onto the button
Active/Hover When the user clicks on or moves their mouse over the button
Disabled Used when actions are not available to let the user know some additional action or information must first be collected
Waiting Used when paired with a submission or loading action to let the user know something is processing after being actioned on

Do’s and Don’ts

Do place the primary action on the right when paired with a secondary action or cancel
Do use buttons in wizards to progress the user through the workflow
Do lead with strong verbs that encourage action for the user
Don't use descriptive text that’s not clear in reference with the action
Don't use buttons in place of general navigation
Don't use sentence case or all caps
Buttons are elements that allow a user to take an action.

Variants

Decorators

Color and Typography

Variant Fill & Border Color Font
Primary
$button-background-primary Themeable - Demo color shown #23334E
$button-border-primary Themeable - Demo color shown #23334E
14px Themeable - Demo color shown #FFFFFF
Secondary
$button-background-secondary Transparent
$button-border-secondary Themeable - Demo color shown #23334E
14px Themeable - Demo color shown #23334E
Ghost (destructive)
$button-background-ghost Transparent
$button-border-ghost Transparent
14px Thunderbird
Ghost (link text)
$button-background-ghost Transparent
$button-border-ghost Transparent
14px Steel Blue

Spacing

Buttons are elements that allow a user to take an action.

Example

For details on when to use this component, see the Usage tab.

Variants

The variants of this component are as follows:

<button class="iris-button iris-button--primary">
    <span class="iris-button__text">Primary</span>
</button>
<button class="iris-button iris-button--secondary">
    <span class="iris-button__text">Secondary</span>
</button>
<button class="iris-button iris-button--action">
    <span class="iris-button__text">Action</span>
</button>
<button class="iris-button iris-button--ghost">
    <span class="iris-button__text">Ghost</span>
</button>
<button class="iris-button iris-button--circular" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>

States

The states for this component are as follows:

Disabled

<button class="iris-button iris-button--primary" disabled>
    <span class="iris-button__text">Primary</span>
</button>
<button class="iris-button iris-button--secondary" disabled>
    <span class="iris-button__text">Secondary</span>
</button>
<button class="iris-button iris-button--action" disabled>
    <span class="iris-button__text">Action</span>
</button>
<button class="iris-button iris-button--ghost" disabled>
    <span class="iris-button__text">Ghost</span>
</button>

Decorators

The decorators for this component are as follows:

Full Width

<button class="iris-button iris-button--primary" data-size="full-width">
    <span class="iris-button__text">Full Width</span>
</button>

Compressed

<button class="iris-button iris-button--primary" data-modifier="compressed">
    <span class="iris-button__text">Compressed</span>
</button>

Pill

<button class="iris-button iris-button--primary" data-modifier="pill">
    <span class="iris-button__text">Primary Pill</span>
</button>
<button class="iris-button iris-button--secondary" data-modifier="pill">
    <span class="iris-button__text">Secondary Pill</span>
</button>
<button class="iris-button iris-button--action" data-modifier="pill">
    <span class="iris-button__text">Action Pill</span>
</button>
<button class="iris-button iris-button--primary" data-modifier="compressed pill">
    <span class="iris-button__text">Primary Compressed Pill</span>
</button>
<button class="iris-button iris-button--secondary" data-modifier="compressed pill">
    <span class="iris-button__text">Secondary Compressed Pill</span>
</button>
<button class="iris-button iris-button--action" data-modifier="compressed pill">
    <span class="iris-button__text">Action Compressed Pill</span>
</button>

Neutral

NOTE: Only works with ghost variant.

<button class="iris-button iris-button--ghost" data-modifier="neutral">
    <span class="iris-button__text">Neutral</span>
</button>

Destructive

NOTE: Only works with ghost and circular variant.

<button class="iris-button iris-button--ghost" data-modifier="destructive">
    <span class="iris-button__icon font-icon-trashcan" aria-hidden="true"></span>
    <span class="iris-button__text">Destructive</span>
</button>

Icons

Icon to the left of button text

<button class="iris-button iris-button--primary">
    <span class="iris-button__icon font-icon-business" aria-hidden="true"></span>
    <span class="iris-button__text">Primary</span>
</button>
<button class="iris-button iris-button--secondary">
    <span class="iris-button__icon font-icon-edit" aria-hidden="true"></span>
    <span class="iris-button__text">Secondary</span>
</button>
<button class="iris-button iris-button--action">
    <span class="iris-button__icon font-icon-external" aria-hidden="true"></span>
    <span class="iris-button__text">Action</span>
</button>
<button class="iris-button iris-button--ghost">
    <span class="iris-button__icon font-icon-trashcan" aria-hidden="true"></span>
    <span class="iris-button__text">Ghost</span>
</button>

Icon to the right of button text

    <button class="iris-button iris-button--primary">
        <span class="iris-button__text">Primary</span>
        <span class="iris-button__icon font-icon-business" aria-hidden="true"></span>
    </button>
    <button class="iris-button iris-button--secondary">
        <span class="iris-button__text">Secondary</span>
        <span class="iris-button__icon font-icon-edit" aria-hidden="true"></span>
    </button>
    <button class="iris-button iris-button--action">
        <span class="iris-button__text">Action</span>
        <span class="iris-button__icon font-icon-external" aria-hidden="true"></span>
    </button>
    <button class="iris-button iris-button--ghost">
        <span class="iris-button__text">Ghost</span>
        <span class="iris-button__icon font-icon-trashcan" aria-hidden="true"></span>
    </button>
<button class="iris-button iris-button--primary" aria-label="Add business payee">
    <span class="iris-button__icon font-icon-business"></span>
</button>
<button class="iris-button iris-button--secondary" aria-label="Edit payee information">
    <span class="iris-button__icon font-icon-edit"></span>
</button>
<button class="iris-button iris-button--action" aria-label="Add external account">
    <span class="iris-button__icon font-icon-external"></span>
</button>
<button class="iris-button iris-button--ghost" aria-label="Delete payee">
    <span class="iris-button__icon font-icon-trashcan"></span>
</button>

Circular

<button class="iris-button iris-button--circular iris-button--primary" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>
<button class="iris-button iris-button--circular iris-button--secondary" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>
<button class="iris-button iris-button--circular" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>
<button class="iris-button iris-button--circular" data-modifier="destructive" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-trashcan"></span>
</button>

Alternate Markup

Buttons don't necessarily have to be <button> elements. You can use other elements such as <a>. If you are using a non-traditional element other than anchor tags. You will need to add role="button", tab-index="0" and make click and keyboard accessors available to the action. Usually it's just easier to use a <button> or <a> element.

<a class="iris-button iris-button--primary" href="#">
    <span class="iris-button__text">Primary</span>
</a>
<a class="iris-button iris-button--secondary" href="#">
    <span class="iris-button__text">Secondary</span>
</a>
<a class="iris-button iris-button--action" href="#">
    <span class="iris-button__text">Action</span>
</a>
<a class="iris-button iris-button--ghost" href="#">
    <span class="iris-button__text">Ghost</span>
</a>
<a class="iris-button iris-button--circular" aria-label="Edit account information" href="#">
    <span class="iris-button__icon font-icon-pencil"></span>
</a>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

  • When the only content in a button is ONLY an icon, make sure that there is not an aria-hidden attribute on the icon and that the button has an aria-label on it describing the button's function.
  • If not using a <button> or <a> element, the button component should include:
    • a role="button" attribute
    • a tab-index="0" attribute
    • a click handler
    • a keyboard handler that captures the enter and space keys

Variables

The variables used in this component are as follows:

// Background variables
$button-background-action: $white !default;

// Border variables
$button-border: 1px solid !default;
$button-border-action: $dove-gray !default;

// Text variables
$button-font-size: 1.5rem !default;
$button-font-size-ghost: 1.3rem !default;
$button-font-weight: 700 !default;
$button-font-weight-action: 400 !default;
$button-text-action: $dove-gray !default;
$button-text-ghost: $steel-blue !default;

// Box shadow variables
$button-box-shadow-focus: $steel-blue !default;
$button-box-shadow-disabled: none !default;

// Hover variables
$button-action-background-hover: $wild-sand !default;
$button-action-border-hover: $mine-shaft !default;
$button-action-text-hover: $mine-shaft !default;
$button-ghost-text-hover: darken($steel-blue, 10%) !default;

// Disabled variables
$button-action-background-disabled: mix($white, $button-background-action, 50%) !default;
$button-action-border-disabled: mix($white, $button-border-action, 50%) !default;
$button-action-text-disabled: mix($white, $button-text-action, 50%) !default;
$button-ghost-text-disabled: mix($white, $button-text-ghost, 50%) !default;

// Destructive Variables
$button-destructive-text: $thunderbird !default;
$button-destructive-hover-text: darken($thunderbird, 10%) !default;
$button-destructive-disabled-text: mix($white, $button-destructive-text, 50%) !default;

Themeability

Currently we theme the primary and secondary variants. Background colors, text colors, and border colors of these variants are themed using the _buttons.scss iris theme override file. The variables available in that file are as follows:

// Background variables
$button-primary-background: $primary-color !default;
$button-secondary-background: transparent !default;

// Border variables
$button-primary-border: $button-primary-background !default;
$button-secondary-border: $primary-color !default;

// Text variables
$button-primary-text: $white !default;
$button-secondary-text: $primary-color !default;

// Hover variables
$button-primary-background-hover: darken($button-primary-background, 10%) !default;
$button-primary-border-hover: $button-primary-background-hover !default;
$button-primary-text-hover: $button-primary-text !default;
$button-secondary-background-hover: $primary-color !default;
$button-secondary-border-hover: $button-secondary-background-hover !default;
$button-secondary-text-hover: $white !default;

// Disabled variables
$button-primary-background-disabled: mix($white, $button-primary-background, 50%) !default;
$button-primary-border-disabled: mix($white, $button-primary-border, 50%) !default;
$button-primary-text-disabled: mix($white, $button-primary-text, 50%) !default;
$button-secondary-background-disabled: mix($white, $button-secondary-background, 50%) !default;
$button-secondary-border-disabled: mix($white, $button-secondary-border, 50%) !default;
$button-secondary-text-disabled: mix($white, $button-secondary-text, 50%) !default;

Variant: Primary | State: Static | Decorator: None

<button class="iris-button iris-button--primary ">
    <span class="iris-button__text">Primary Button</span>
</button>

Variant: Primary | State: Disabled | Decorator: None

<button class="iris-button iris-button--primary iris-button--disabled">
    <span class="iris-button__text">Primary Button</span>
</button>

Variant: Secondary | State: Static | Decorator: None

<button class="iris-button iris-button--secondary ">
    <span class="iris-button__text">Secondary Button</span>
</button>

Variant: Secondary | State: Disabled | Decorator: None

<button class="iris-button iris-button--secondary iris-button--disabled">
    <span class="iris-button__text">Secondary Button</span>
</button>

Variant: Action | State: Static | Decorator: None

<button class="iris-button iris-button--action ">
    <span class="iris-button__text">Action Button</span>
</button>

Variant: Action | State: Disabled | Decorator: None

<button class="iris-button iris-button--action iris-button--disabled">
    <span class="iris-button__text">Action Button</span>
</button>

Variant: Alternate | State: Static | Decorator: None

<button class="iris-button iris-button--alt ">
    <span class="iris-button__text">Alternate Button</span>
</button>

Variant: Ghost | State: Static | Decorator: None

<button class="iris-button iris-button--ghost ">
    <span class="iris-button__text">Ghost Button</span>
</button>

Variant: Ghost | State: Disabled | Decorator: None

<button class="iris-button iris-button--ghost iris-button--disabled">
    <span class="iris-button__text">Ghost Button</span>
</button>

Variant: Circular | State: Static | Decorator: None

<button class="iris-button iris-button--circular " data-boson="" aria-label="Circular Button">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>