A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.

A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.

Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.

Default Button

Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.

Use the large modifier to increase the size of the button.

Use the small modifier to decrease the size of the button.

Primary Button

Use the primary modifier to create a primary button style.

Secondary Button

Use the secondary modifier to create a secondary button style.

Tertiary Button

Use the tertiary modifier to create a tertiary button style.

Disabled Button

The disabled attribute is required to fully disable a button tag.

Remove the href attribute to fully disable an anchor tag.

Partially Disabled Button

Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.

Destructive Button

Use the destructive modifier to create a destructive button style used for removing data.

Primary Destructive Button

Secondary Destructive Button

Tertiary Destructive Button

Adjacent Icon Button

Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.

Busy State for Button

Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

Click the button below for an interactive example.

NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

Flexible Button

Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

Fixed Height Button

To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height.

Fixed Width Button

Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.

Fixed Width and Height Button

Of course, with a constrained width and a fixed height, the text will begin to overflow.

The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.

Expandable Buttons

Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.

Use the borderless modifier to remove the border from the expandable button.

Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).

Use the btn--slim modifier, in conjunction with btn--form, if displaying an icon only.

For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.

In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript