Button

Fundamental call-to-action element

Demo

API

Tag

Name	Description
`<button>`	Standard HTML tag, accepts content

Attributes

Name	Value	Description
`type`	"submit"	Makes the button a form submit button.
`disabled`	Boolean attribute	Disables the button. When using an `<a>` element, be aware that the link button looks disabled but is still active. You must `e.preventDefault()` or remove the `href` to disable it.
`aria-disabled`	"true" or "false" (string)	Informs screen readers that the button is present but disabled. JavaScript will be required to prevent keyboard interaction with the button. Do not use this attribute with the `disabled` attribute. See Guidelines for more information.

Classes

Name	Description
`primary`	Applies primary styles
`secondary`	Applies secondary styles
`tertiary`	Applies tertiary styles
`ghost`	Applies ghost styles
`ghost-blue`	Applies ghost blue styles
`small`	Decreases the size of the button
`large`	Increases the size of the button
`icon`	Styles a button containing only an `s-icon`
`icon-leading`	Styles a button containing a leading `s-icon`
`icon-trailing`	Styles a button containing a trailing `s-icon`
`loading`	Applies loading style to a button. See notes on accessibility in the Guidelines below.
`active`	Applies active styles to a button
`a.button`	Applies button styles to `<a>` elements
`link`	Applies text link styles to a button

Guidelines

Accessibility

A button represented by an icon rather than text needs an aria-label attribute that describes its function (e.g. aria-label="close window") AND an associated tooltip. If the button opens content directly after it or before it in the DOM then it should have aria-expanded="false" which toggles to "true" when opened. It is discouraged to add content to the page above a button that triggers it, but if that is done, then add offscreen text inside the inner text of the button <button aria-expanded="false"...>[Label text] <span class="sr-only">content will be added above</span></button>

Consider using aria-disabled="true" instead of the disabled attribute on temporarily disabled form submission buttons. This will allow screen reader users to be aware of a button's existence, whereas disabled buttons are hidden from screen readers. The aria-disabled="true" buttons will be styled correctly but will require you to add some JavaScript to prevent user interaction via the keyboard. For more information, and sample JavaScript for disabling the button, see this css-tricks article.

The ghost styling of a button should be used only on rare occasions when the label text, the placement, the context and spacing would make it obvious to sighted people, who may have cognitive disabilities, that it is an actionable button.

If you are going to use the loading class on a button, give the button aria-live="polite", and add an offscreen span which contains text indicating that content is loading (the span must be a child of the button element). Note that setting display: none on the text element will hide it from screen readers as well, so you will have to use the visually-hidden class, which places it offscreen.

Styling links as buttons

You can style links with the button class when the use case requires an actual link. Do not use links when you should be using a button; a click handler is generally a sign that a button rather than a link is needed.

Styling buttons as links

You can also style a button to look like a text link. This is appropriate when you would otherwise have to put a click handler on an <a>, which is not an accepted pattern.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com