American Express American Express |

Buttons

Purpose

Buttons are used as triggers for actions. They can contain a button text and/or an icon and come in a variety of styles and sizes.

Button texts should be clear, brief and invite the customer to take action. Use the following guidelines when creating button texts:

  • Use a (verb) + (noun) construction (e.g. “View Account Details”), and be specific in the action a user is taking (e.g. do not use “Learn More”).
  • Don’t use personal pronouns (e.g. “View my Account Details”).
  • Use consistent verbiage for common actions (e.g. “View” takes a user to a new view).
  • Keep it short. Target a length of 1-3 words (no more than 5).

Styles and Sizes

Button styles

Primary: The most important action on a page.
Secondary: The less important or alternative action on a page.
Tertiary: The least important action on a page. A tertiary button can exist without a secondary button.
Disabled: A disabled action on a page.

Usage

To make sure calls-to-action are clearly visible on all backgrounds, the DLS provides two sets of buttons: one for light backgrounds and one for dark backgrounds. Select which button to use based on color contrast with the background color. In order to be compliant to AA Accessibility standards, maintain a minimum color contrast ratio of 4.5:1.

Example - Light and Dark Background

Light Theme

Dark Theme

Copy
<div class="flex flex-wrap">
  <div>
    <p class="label-2 pad-b">Light Theme</p>
    <div class="stack-1 dls-gray-02-bg margin-r-md-up pad">
        <button class="btn btn-block margin-auto-lr">Primary</button>
        <button class="btn btn-block margin-auto-lr btn-secondary">Secondary</button>
        <button class="btn btn-block margin-auto-lr btn-tertiary">Tertiary</button>
        <button class="btn btn-block margin-auto-lr" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <p class="label-2  pad-b">Dark Theme</p>
    <div class="pad stack-1 position-relative" style="background-image:url('../../assets/img/visuals/layout/containers-showcase.jpg');">
      <div class="card-img-tint card-img-hero-tint dls-black-bg"></div>
      <button class="btn btn-block margin-auto-lr btn-white">Primary</button>
      <button class="btn btn-block margin-auto-lr btn-white-secondary">Secondary</button>
      <button class="btn btn-block margin-auto-lr btn-white-tertiary">Tertiary</button>
      <button class="btn btn-block margin-auto-lr btn-white" disabled>Disabled</button>
    </div>
  </div>
</div>

Usage

There are two button sizes available: medium and small. The medium button is recommended for any page-level actions. The small button is used when there are multiple, competing calls-to-action on a page to introduce hierarchy. Avoid using two different button sizes in close proximity to each other within the same component.

Example - Medium Buttons

Copy
<div class="stack-1 flex flex-column flex-align-items-start">
    <button class="btn">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-tertiary">Tertiary</button>
    <button class="btn" disabled>Disabled</button>
</div>

Example - Small Buttons

Copy
<div class="stack-1 flex flex-column flex-align-items-start">
    <button class="btn-sm-wrapper"><span class="btn btn-sm">Primary</span></button>
    <button class="btn-sm-wrapper"><span class="btn btn-sm btn-secondary">Secondary</span></button>
    <button class="btn-sm-wrapper"><span class="btn btn-sm btn-tertiary">Tertiary</span></button>
    <button class="btn-sm-wrapper" disabled><span class="btn btn-sm">Disabled</span></button>
</div>

Button Text

Usage

Button texts need to be simple, clear and easy to understand. For accessibility, generic texts like “Learn More” are not recommended, as they do not inform a user of the content behind the action. You can fit up to 20 characters (including spaces) on a medium button text while maintaining the 20px padding left and right of the text. Remember that action should be brief: the longer a button text, the longer a user spends reading them.

The following alternative solution may be used for lengthy text that cannot be refined. However, this should not be your first choice for design:

How to solve for button with long texts:

  1. Work with the business to refine the text to make it shorter.
  2. If character length is too long, use responsive type.

Example - Standard (Max Width)

If the call-to-action is too long — for example, “View Additional Card Members on this Card” — then revise and shorten the text.

Do this.

Don't do this.

Example - Responsive Type (Alternative Solution)

Responsive type changes the font size to help the characters fit. Please note that if there are additional standard buttons on the page, then style may have a negative impact on the hierarchy due to text size inconsistency and may make the standard button appear to take precedence over the responsive button text.

Copy
<button class="btn btn-max btn-small-label btn-overflow">Font Changes from 16px to 14px</button>

Loading Buttons

Usage

A loading button lets the customer know that a submission was received and is taking time to process.

Example - Medium Buttons

Copy
<div class="row container">
  <div class="stack-1-a pad-tb">
    <button class="btn" aria-disabled="true" tabindex="-1">
      <span class="invisible">Primary</span>
      <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
    </button>

    <button class="btn btn-secondary" aria-disabled="true" tabindex="-1">
      <span class="invisible">Secondary</span>
      <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
    </button>

    <button class="btn btn-tertiary" aria-disabled="true" tabindex="-1">
      <span class="invisible">Tertiary</span>
      <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
    </button>
  </div>
</div>

Example - Small Buttons

Copy
<!--
    Button content must be wrapped in `invisible` class element when
    used in conjunction with `btn-loading`
-->

<div class="row container">
  <div class="stack-1-a pad-tb">
    <button class="btn-sm-wrapper" aria-disabled="true" tabindex="-1">
      <span class="btn btn-sm">
        <span class="invisible">Primary</span>
        <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
      </span>
    </button>

    <button class="btn-sm-wrapper" aria-disabled="true" tabindex="-1">
      <span class="btn btn-sm btn-secondary">
        <span class="invisible">Secondary</span>
        <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
      </span>
    </button>

    <button class="btn-sm-wrapper" aria-label="loading" aria-disabled="true" tabindex="-1">
      <span class="btn btn-sm btn-tertiary">
        <span class="invisible">Tertiary</span>
        <i class="anim-spinner-indeterminate position-absolute-tl position-absolute-br" data-dls-icon="progress-circle" data-dls-icon-variant="filled" data-dls-icon-size="md" title="loading"></i>
      </span>
    </button>
  </div>
</div>

Group Button Variations

Usage

Buttons can be grouped together when presenting multiple action options to a customer. Avoid using more than one primary button in a group. To maintain visual conformity, all buttons in a group should match their width to the widest button in that group. This does not apply to all buttons on the page.

Stacked Buttons

Usage

A primary action will always be above a secondary or tertiary action. Stacked buttons will always be equal in width. Buttons should always center horizontally within the component.

Example - Medium Buttons

Copy
<div class="stack-1 flex flex-column flex-align-items-center">
  <button class="btn btn-block">Medium Primary</button>
  <button class="btn btn-block btn-secondary">Medium Secondary</button>
</div>

Example - Small Buttons

Copy
<div class="stack-1 flex flex-column flex-align-items-center">
  <button class="btn-sm-wrapper"><span class="btn btn-block btn-sm">Small Primary</span></button>
  <button class="btn-sm-wrapper"><span class="btn btn-block btn-sm btn-secondary">Small Secondary</span></button>
</div>

Horizontal Buttons

Usage

A primary action will always be to the right of a secondary and/or tertiary action. Placement of horizontal buttons varies depending on the content and may be either right- or center-aligned with a component.

Example - Medium buttons

Copy
<div class="row flex-justify-center margin-3-tb ">
  <div class="col-xs-12 col-lg-6 stack-1-a flex flex-justify-center flex-align-items-center flex-column-sm-down">
    <button class="btn btn-secondary btn-block margin-1-r-md-up">Medium Secondary</button>
    <button class="btn btn-block">Medium Primary</button>
  </div>
</div>

Example - Small buttons

Copy
<div class="row flex-justify-center margin-3-tb ">
  <div class="col-xs-12 col-lg-5 stack-1-a flex flex-justify-center flex-align-items-center flex-column-sm-down">
    <button class="btn-sm-wrapper margin-1-r-md-up"><span class="btn btn-sm btn-secondary btn-block">Small Secondary</span></button>
    <button class="btn-sm-wrapper"><span class="btn btn-sm btn-block">Small Primary</span></button>
  </div>
</div>

Horizontal Buttons with Uneven Width

Usage

When a set of horizontal buttons is uneven in width, the width of each button is dependent on the length of its text. Button texts still follows the min and max width rules.

Example - Medium Buttons

Copy
<div class="stack-1 flex flex-justify-center flex-align-items-start flex-wrap">
    <button class="btn btn-secondary margin-1-lr">View Payment Activity</button>
    <button class="btn">Make a Payment</button>
</div>

Example - Small Buttons

Copy
<div class="stack-1 flex flex-justify-center flex-align-items-start flex-column-sm-down">
    <button class="btn-sm-wrapper margin-1-lr"><span class="btn btn-sm btn-secondary">View Payment Activity</span></button>
    <button class="btn-sm-wrapper"><span class="btn btn-sm">Make a Payment</span></button>
</div>

Responsive Behavior of Multiple Buttons

Example 1 - Responsive Behavior, Buttons

Copy
<div class="action-groups">
    <div class="group-primary">
        <button class="btn btn-block margin-auto-lr btn-primary">Primary</button>
        <button class="btn btn-block margin-auto-lr btn-secondary">Secondary</button>
    </div>

    <div class="group-secondary">
        <button class="btn btn-block margin-auto-lr btn-tertiary">Tertiary</button>
    </div>
</div>

Example 2 - Responsive Behavior, Buttons & Text link

Copy
<div class="action-groups">
    <div class="group-primary">
        <button class="btn btn-block margin-auto-lr btn-primary">Primary</button>
        <button class="btn btn-block margin-auto-lr btn-tertiary">Tertiary</button>
    </div>

    <div class="group-secondary">
        <a class="link-underlined" href="#">Text Link</a>
    </div>
</div>

Icon Buttons

Usage

Icon buttons include an icon to help the customer quickly identify the intended action or destination.

They can be used without a button text if space is limited. When an icon button doesn’t have a button text, the minimum width rule doesn’t apply but a tooltip must be used to provide context. Icon buttons with a button text follow the same specs and rules as noted above.

Go to Icon and Glyphs section to see all available options.

Example - Medium Primary Button

Copy
<div class="flex">
  <button class="btn btn-primary btn-icon margin-1-r">
      <i data-dls-icon="setting" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
      <span>Settings</span>
  </button>
  <div data-toggle="tooltip" class="tooltip-container">
    <button
      data-attach-tooltip
      aria-label="medium primary tooltip"
    >
      <i class="flex btn btn-icon btn-inline" data-dls-icon="tag" data-dls-icon-size="md" title="Tag icon"></i>
    </button>
    <div class="tooltip" data-placement="top" role="tooltip">
      <div class="tooltip-arrow">
        <div class="tooltip-arrow-pointer"></div>
      </div>
      <div id="tag-btn-medium-primary" class="tooltip-inner">Add a tag</div>
    </div>
  </div>
</div>

Example - Medium Secondary Button

Copy
<div class="flex">
<button class="btn btn-secondary btn-icon margin-1-r">
    <i data-dls-icon="setting" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
    <span>Settings</span>
</button>
  <div data-toggle="tooltip" class="tooltip-container">
    <button
      data-attach-tooltip
      aria-label="medium secondary tooltip"
    >
      <i class="flex btn btn-icon btn-secondary icon-hover btn-inline" data-dls-icon="tag" data-dls-icon-size="md" title="Tag icon"></i>
    </button>
    <div class="tooltip" data-placement="top" role="tooltip">
      <div class="tooltip-arrow">
        <div class="tooltip-arrow-pointer"></div>
      </div>
      <div id="tag-btn-medium-secondary" class="tooltip-inner">Add a tag</div>
    </div>
  </div>
</div>

Example - Small Primary Button

Copy
<div class="flex">
  <button class="btn-sm-wrapper margin-1-r">
    <span class="btn btn-primary btn-icon btn-sm">
      <i data-dls-icon="setting" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Settings</span>
    </span>
  </button>
  <div data-toggle="tooltip" class="tooltip-container">
    <button
      data-attach-tooltip
      class="btn-sm-wrapper"
      aria-describedby="tag-btn-small-primary" aria-label="small primary tooltip">
      <i class="flex btn btn-icon btn-sm btn-inline" data-dls-icon="tag" data-dls-icon-size="sm" title="Tag icon"></i>
    </button>
    <div class="tooltip" data-placement="top" role="tooltip">
      <div class="tooltip-arrow">
        <div class="tooltip-arrow-pointer"></div>
      </div>
      <div id="tag-btn-small-primary" class="tooltip-inner">Add a tag</div>
    </div>
  </div>
</div>

Example - Small Secondary Button

Copy
<div class="flex">
  <button class="btn-sm-wrapper margin-1-r">
    <span class="btn btn-icon btn-secondary btn-sm">
      <i data-dls-icon="setting" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Settings</span>
    </span>
  </button>
  <div data-toggle="tooltip" class="tooltip-container">
    <button
      data-attach-tooltip class="btn-sm-wrapper"
      aria-describedby="tag-btn-small-secondary"
      aria-label="small secondary tooltip">
      <i class="flex btn btn-icon btn-secondary btn-sm btn-inline" data-dls-icon="tag" data-dls-icon-size="sm" title="Tag icon"></i>
    </button>
    <div class="tooltip" data-placement="top" role="tooltip">
      <div class="tooltip-arrow">
        <div class="tooltip-arrow-pointer"></div>
      </div>
      <div id="tag-btn-small-secondary" class="tooltip-inner">Add a tag</div>
    </div>
  </div>
</div>

Fluid Buttons

Usage

Instead of following the standard max width requirements, a fluid button’s width is defined by the width of its container.

Example - Medium Fluid Button

Copy
<button class="btn fluid">Primary</button>

Cobrand Buttons

Usage

Cobrand buttons leverage the Cobrand colors to enhance the brand.

Example - Amazon

Copy
<button class="btn btn-cobrand-amazon">Use Points</button>

Example - Plum

Copy
<button class="btn btn-cobrand-plum">Use Points</button>

Floating Buttons

Usage

Floating buttons enable customers to interact with features such as chat and back-to-top. They remain in place, independent of scrolling, but their presence and appearance change depending on responsive and scroll behavior.

Chat Floating Button

This button style anchors to the bottom of the page, giving the customer access to customer service without having to leave the page.

Chat Floating Button Specs

Back-to-Top Floating Button

This button appears once the customer has scrolled through 20% of page content. When the button is selected, the page will automatically scroll to the top.

Back-to-Top Floating Button Specs

Example - All Floating Buttons in Context

All Floating Buttons in Context Specs

View Prototype

Chevron Buttons

Usage

Chevron buttons can contain personalized information but are not usable text fields, and depict dls-glyph-right chevrons, pointing to the right. These appear as a set of stacked buttons and do not produce a menu but instead enable the customer to select just one out of the set to use as they continue their journey.

Example - Default

Copy
<div class="stack-1">
    <button class="btn btn-chevron btn-block">char****@gmail.com</button>
    <button class="btn btn-chevron btn-block">xxx-xxx-2643</button>
</div>

Example - Disabled

Copy
<button class="btn btn-chevron btn-block" disabled>char****@gmail.com</button>

Contextual Text Buttons

Deprecated

Usage

A contextual text button allows for the button’s text to take on the color over which it’s positioned.

Styles - Button Utilities

Class Name Description
.btn Styles buttons and elements that look like a button. By default it is styled as a primary blue button. Required for all .btn-* classes.
.btn-inline Displays the element as an inline-block
.btn-block Displays the element as a block with 100% width.
.btn-sm Styles a smaller button.
.btn-small-label Sets the font size to 0.875rem.
.btn-max Sets the width at 280px.
.btn-loading Adds an animated loading indicator. Should be used with the .invisible class for the text.
.btn-float Adds opacity and animation.

Styles - Light Theme

Class Name Description
.btn-primary Bright blue button with white text. Used for the most important action on a page.
.btn-secondary White button with bright blue text. Used for the less important or alternative action on a page.
.btn-tertiary Transparent button with bright blue text. Used for the least important action on a page. A tertiary button can exist without a secondary button.

Styles - Dark Theme

Class Name Description
.btn-white White button with bright blue text. Used for the most important action on a page.
.btn-white-secondary Transparent button with white text and white border. Used for the less important or alternative action on a page.
.btn-white-tertiary Transparent button with bright blue text. Used for the least important action on a page. A tertiary button can exist without a secondary button.

Styles - Variations

Class Name Description
.btn-cobrand-* Styles the button based on the cobrand specified, listed in the Cobrand colors section.
.btn-contextual White button with text color specified by a color class.
.btn-chevron Button with a right chevron.
.btn-circle Circular button.