Links and buttons

Links

Links use the primary color with a soft underline that thickens on hover.

Read this link to the current section. A link can wrap across lines inside a long sentence, such as this longer link that points to the buttons section further down.

Accessibility

Links keep their underline, so they don't rely on color. With more contrast, the underline turns solid and the focus ring grows.

Customize

Links use --m-primary.

Link icons

An element with aria-hidden="true" inside a link is a decorative icon: it isn't underlined, and a favicon or svg in it is sized to the text.

Star the project or Download it

Accessibility

aria-hidden="true" keeps screen readers to the link text. A link that's only an icon needs an aria-label instead.

Customize

Icons take the link color. Emoji, icon fonts such as <i class="fa-…" aria-hidden="true">, and favicons in a span work the same way.

Buttons

Buttons are solid primary. type="reset" and formnovalidate buttons are secondary outlines.

Accessibility

aria-busy="true" shows a spinner that pulses instead of spinning when motion is reduced. Disabled buttons can't be focused, so explain why an action is unavailable somewhere else.

Customize

The text on a primary button picks black or white for contrast, or --m-on-primary if you set it.

Link buttons

A link with role="button" looks like a button.

Link button Disabled link button

Accessibility

aria-disabled="true" dims the link, but it still navigates: stop that with script, or remove the href.

Customize

Same as buttons.

Groups and toggles

role="group" joins its children into one control. Buttons with aria-pressed are toggles, so a group of them is a segmented control.

Accessibility

Label the group with aria-label. Screen readers announce each toggle as pressed or not. This demo moves the pressed state with a small script.

Customize

The pressed state uses a tint of --m-primary and a thicker border.