Buttons

Buttons trigger interactions throughout the experience.

Button

Variations

Primary

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

Default
Hover
Active
Focus
<button class="mds-button mds-button--primary" type="button" role="button"> Button Text </button>
Disabled
<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.

Default
Hover
Active
Focus
<button class="mds-button mds-button--secondary" type="button" role="button"> Button Text </button>
Disabled
<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.

Flat, No Background

Replaces Flat, Deprecated by reducing padding and removing rounded corners on left and right edges.

Default
Hover
Focus
<button class="mds-button mds-button--flat-no-background" type="button" role="button"> Button Text </button>
Disabled
<button class="mds-button mds-button--flat-no-background" type="button" disabled role="button"> Button Text </button>

Flat, Deprecated, to be removed in v2.0.0.

Use Flat, No Background variation instead.

Default
Hover
Active
Focus
Disabled

With Icon

Add Icons to provide additional affordance to a button.

On Left
On Right
On Left and Right
<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-no-background" 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.
  • Only place an Icon to the right of a button's label to trigger a Menu or imply directionality.

Icon Only

Use for toolbars and displays where words won't comfortably fit alongside icons.

Default
Hover
Focus
<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>
Disabled
<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>
  • 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-left-2-x 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.
Don‘t place icon-only buttons between paired buttons.
Don‘t place icon-only buttons between paired buttons.

Sizing

Configure button size and icon size independently within the button.

Button Size

Each button variation allows for small, medium, and large sizes. The default size is medium, and you can use modifier classes to make the button smaller (mds-button--small) or larger (mds-button--large).

Small
Medium
Large
<button class="mds-button mds-button--small 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--small 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--small mds-button--flat-no-background" 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--small 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#heart--s">
            <title>User</title>
        </use>
    </svg>
</button>
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.
  • Use small buttons in toolbars and Popover and Menu headers.
  • Never apply the mds-button--large to an Icon-Only button.

Icon Size

Icon size depends on button type and size. In some cases, markup requires a modifier class to display the correct icon size based on a button’s size.

Type
Small button
Medium button
Large button

Primary

Small Icon

Small Icon

Medium Icon

Secondary

Small Icon

Small Icon

Medium Icon

Flat

Small Icon

Small OR Medium Icon

Medium Icon

Icon Only

Small Icon

Medium Icon

N/A

  • By default, Primary, Secondary, and Flat buttons display a small icon.
  • Apply the .mds-button--icon-m class to a large Primary, large Secondary, and large or medium Flat button to display a medium-sized icon.
  • Never use --s sized icon SVGs when including .mds-button--icon-m to size the icon.
  • Never apply .mds-button--icon-m to a medium or small Primary or Secondary button or small Icon-Only or Flat button.
  • The Icon-Only button applies the correct icon size based the button’s size. A medium-sized Icon-Only button displays a medium-sized icon, and a small-sized Icon-Only button displays a small-sized icon.

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.
Don‘t 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.
Don‘t 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.
  • Do not use div or span unless strictly required, such as when using the sort buttons in Data Tables.
  • 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 a <title> tag on the svg within an icon-only button to describe the button’s intent for icon-only buttons. See Iconography accessibility section.

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--flat-no-background

.mds-button

Shows tertiary button, to be coupled with .mds-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.

.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-left

.mds-button--icon

Positions an icon to the left of a button label.

.mds-button--icon-right

.mds-button--icon

Positions an icon to the right of a button label.

.mds-button--icon-m

.mds-button--icon

Sizes an icon as medium within a medium or large button. Always use for large Primary, Secondary and Flat buttons, medium Icon-Only buttons that need a medium-sized icon, and optionally for medium Flat buttons. Never use for other medium or small button types.

©2017 Morningstar, Inc. All rights reserved. Terms of Use