Buttons

Buttons trigger interactions throughout the experience.

Link Template

Variations

Primary

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

Default

Hover

Active

Focus

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<button class="mds-button mds-button--primary" type="button" role="button"> Button Text </button>

Disabled

White

Light

Dark

Black

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.

Default

Hover

Active

Focus

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<button class="mds-button mds-button--secondary" type="button" role="button"> Button Text </button>

Disabled

White

Light

Dark

Black

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.

Default

Hover

Active

Focus

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<button class="mds-button mds-button--flat" type="button" role="button"> Button Text </button>

Disabled

White

Light

Dark

Black

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.

Icon on Left

White

Light

Dark

Black

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-labelledby="title">
        <title>open-new--s</title>
        <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-labelledby="title">
        <title>open-new--s</title>
        <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-labelledby="title">
        <title>open-new--s</title>
        <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.

Icon on Right

White

Light

Dark

Black

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-labelledby="title">
        <title>caret-right--s</title>
        <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-labelledby="title">
        <title>caret-right--s</title>
        <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-labelledby="title">
        <title>caret-right--s</title>
        <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.

Icon on Both

White

Light

Dark

Black

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-labelledby="title">
        <title>upload--s</title>
        <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-labelledby="title">
        <title>caret-down--s</title>
        <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-labelledby="title">
        <title>upload--s</title>
        <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-labelledby="title">
        <title>caret-down--s</title>
        <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-labelledby="title">
        <title>upload--s</title>
        <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-labelledby="title">
        <title>caret-down--s</title>
        <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"></use>
    </svg>
</button>

Icon Only

Use for toolbars and compact displays.

Default

Hover

Focus

White

Light

Dark

Black

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" aria-labelledby="title">
        <title>person-padless</title>
        <use xlink:href="/assets/icons/mds_icons.svg#person-padless"></use>
    </svg>
</button>

Disabled

White

Light

Dark

Black

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" aria-labelledby="title">
        <title>person-padless</title>
        <use xlink:href="/assets/icons/mds_icons.svg#person-padless"></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.

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

Small

Use in settings with limited space and to perform secondary actions.

Primary

Secondary

Flat

Icon-Only

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<button class="mds-button mds-button--small mds-button--primary" type="button" role="button"> Sign Up </button>
<button class="mds-button mds-button--small mds-button--primary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-labelledby="title">
        <title>bell--s</title>
        <use xlink:href="/assets/icons/mds_icons.svg#bell--s"></use>
    </svg>
    <span class="mds-button__text"> Notifications </span>
</button>
<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-labelledby="title">
        <title>caret-right--s</title>
        <use xlink:href="/assets/icons/mds_icons.svg#caret-right--s"></use>
    </svg>
</button>
<button class="mds-button mds-button--small mds-button--primary" type="button" role="button">
    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-labelledby="title">
        <title>heart--s</title>
        <use xlink:href="/assets/icons/mds_icons.svg#heart--s"></use>
    </svg>
    <span class="mds-button__text"> Favorites </span>
    <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-labelledby="title">
        <title>caret-down--s</title>
        <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"></use>
    </svg>
</button>

Use in toolbars and Popover and Menu headers.
Use only --s icons in small buttons.

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.

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