Buttons

Buttons trigger interactions throughout the experience.

Variations

Primary

Use for highest-priority actions that are required to complete the user’s task.

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--primary" type="button" role="button"> Button Text </button>
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--primary" type="button" disabled role="button"> Button Text </button>
  • Use a primary button only once per page, though an additional primary button can appear within Modals, Popovers, or Notifications when needed to signal critical actions.

Secondary

Use for non-critical actions.

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--secondary" type="button" role="button"> Button Text </button>
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--secondary" type="button" disabled role="button"> Button Text </button>
  • Use for most buttons triggering non-critical actions, such as back, cancel, adding or creating an object.

Flat

Use for tertiary actions.

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--flat" type="button" role="button"> Button Text </button>
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--flat" type="button" disabled role="button"> Button Text </button>

With Icon

Use Icons to provide additional affordance to a button.

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--primary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#open-new--s"> </use>
    </svg>
    <span class="mds-button__text"> Copy Document </span>
</button>
<button class="mds-button mds-button--secondary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#open-new--s"> </use>
    </svg>
    <span class="mds-button__text"> Copy Document </span>
</button>
<button class="mds-button mds-button--flat" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#open-new--s"> </use>
    </svg>
    <span class="mds-button__text"> Copy Document </span>
</button>
  • Only place an Icon to the left of a button's label to emphasize meaning.
  • Use only --s icons.
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--primary" type="button" role="button">
    <span class="mds-button__text"> Continue </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-right--s"> </use>
    </svg>
</button>
<button class="mds-button mds-button--secondary" type="button" role="button">
    <span class="mds-button__text"> Continue </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-right--s"> </use>
    </svg>
</button>
<button class="mds-button mds-button--flat" type="button" role="button">
    <span class="mds-button__text"> Continue </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-right--s"> </use>
    </svg>
</button>
  • Only place an Icon to the right of a button's label to trigger a Menu or imply directionality.
  • Use only --s icons.
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--primary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#upload--s"> </use>
    </svg>
    <span class="mds-button__text"> Upload Changes </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"> </use>
    </svg>
</button>
<button class="mds-button mds-button--secondary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#upload--s"> </use>
    </svg>
    <span class="mds-button__text"> Upload Changes </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"> </use>
    </svg>
</button>
<button class="mds-button mds-button--flat" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#upload--s"> </use>
    </svg>
    <span class="mds-button__text"> Upload Changes </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"> </use>
    </svg>
</button>
  • Use only --s icons.

Sizing

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--small mds-button--secondary" type="button" role="button"> Sign Up </button>

Small Button Guidelines

do use a small button for secondary actions, like creating a rule.

Do use a small button for secondary actions, like creating a rule.

do use a small button to apply an action to a dataset.

Do use a small button to apply an action to a dataset.

Icon Only

Use for toolbars and compact displays.

Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--icon-only" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--right">
        <use xlink:href="/assets/icons/mds_icons.svg#person-padless">
            <title>User</title>
        </use>
    </svg>
</button>
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--icon-only mds-button--hover" type="button" disabled role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--right">
        <use xlink:href="/assets/icons/mds_icons.svg#person-padless">
            <title>User</title>
        </use>
    </svg>
</button>
Copy to Clipboard Press Ctrl + C to copy 
<button class="mds-button mds-button--icon-only mds-button--small" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
        <use xlink:href="/assets/icons/mds_icons.svg#heart--s"> </use>
    </svg>
</button>
  • Only use when the Icon’s meaning is unambiguous.
  • Always include an aria-label attribute to describe the button’s intent. <button aria-label="Close" onclick="myDialog.close()">X</button>
  • For toolbars of multiple Icons, use the Button Group component to ensure spacing between icons.
  • Use with Icon remove or remove--s to close Modals, Notifications, and Tooltip prompts.
  • Use with Icon remove or remove--s to remove an item from a list.
  • Consider pairing with a Tooltip to describe the Icon’s underlying action.
Icon-only Button paired with a tooltip.
  • When pairing with a button, use an mds-space-inline-xl space and vertically align middle the icon-only button.
    • When pairing with a small button, use the small icon-only button.
Icon-only Button alignment paired with a button.
do place all icon-only buttons to the left or right of paired buttons.

Do place all icon-only buttons to the left or right of paired buttons.

dont place icon-only buttons between paired buttons.

Don't place icon-only buttons between paired buttons.

Guidelines

Use When

  • Affording interaction to key behaviors and features.
  • Confirming or submitting information entered into a Form.
  • Cancelling an action.
  • Resetting a form or dataset.
  • Closing a container or section.
  • Opening a Menu.
  • Moving forward or backward through a wizard-type workflow.
  • Creating an object within a group.
  • Applying a non-critical action to a dataset.

Don′t Use When

  • Displaying a collection of links to sections. Use Links instead.
  • Linking to an external site. Use Links instead.

Visual Language

do use the same button size for adjacent buttons.

Do use the same button size for adjacent buttons.

dont display normal and small buttons together in the same row.

Don't display normal and small buttons together in the same row.

do place primary buttons to the right within a group of buttons.

Do place primary buttons to the right within a group of buttons.

dont place primary buttons to the left within a group of buttons.

Don't place primary buttons to the left within a group of buttons.

Editorial

  • Label a button with a verb, like “Copy”, or verb-phrase, like “Copy Document”.
  • Strive for short button labels that clearly describe an action.
  • Avoid lengthy button labels that risk wrapping, particularly in responsive settings.

Accessibility

  • Use a <button> element type when displaying buttons.
  • Include a role="button" attribute, although <button> and <input type="button"/> elements do not require this attribute. This declaration can make any HTML element appear as a button to a screen reader.
    • A <div role="button"> or <span role="button"> without a tabindex attribute will not receive a tabbed focus state.
    • A <div role="button"> or <span role="button"> cannot be triggered from a keyboard without JavaScript.
  • An <a> element cannot be triggered from a spacebar press, only from an enter or return press.
  • It is expected that a button can be triggered by pressing spacebar, enter, or return.
  • Always include an aria-label attribute on an icon-only button or a button with a label that doesn't explicitly describe its intent.
    • <button aria-label="Close" onclick="myDialog.close()">X</button>

Code Reference

CSS Class References

Class Applies to Outcome

.mds-button

<button>,
<a>,
<input type="submit"/>, <input type="button"/>, <input type="checkbox"/>, <input type="checkbox"/>, <input type="radio"/>, <div>, or
<span>

Applies base button styles to an element. Always couple with a variant for semantics, though a standalone .mds-button will apply the same visual treatments as .mds-button paired with .mds-button--secondary.

.mds-button--primary

.mds-button

Shows primary button, to be coupled with .mds-button.

.mds-button--secondary

.mds-button

Shows secondary button, to be coupled with .mds-button.

.mds-button--small

.mds-button

Adjusts styling to render a small button.

.mds-button--large

.mds-button

Adjusts styling to render a large button.

.mds-button--icon-only

.mds-button

Applies the icon-only styles to a button element. Specifically, it removes the border strokes and background treatments found on primary and secondary buttons.
©2017 Morningstar, Inc. All rights reserved. Terms of Use