Actions

Buttons

Buttons allow users to perform an action or to (occasionally) navigate to another page. They have multiple styles, sizes and variants for various situations, and can call attention to where a user needs to do something in order to move forward in a flow.

Options

Default button

The default button style is used for medium emphasis. Use it in place of a call to action button when the action requires less prominence, or if there are multiple primary actions of the same importance in the same view.

With Icons

Buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text. The label can be hidden to create an icon-only button. If the label is hidden, an icon is required, and the label will appear in a tooltip.

Icon Button

An Icon button is a uniquely styled button. This is used most often in views that have need for clear de-emphasized icon buttons, like in headers and action-bars.

Primary variant

The primary variant communicates strong emphasis and is reserved for actions that are essential to an experience. These give extra prominence to important actions and are meant to establish a clear hierarchy. This is the call to action.

Secondary variant

The secondary variant is for low emphasis. It’s paired with other button types to surface less prominent actions, and should never be the only button in a group.

Contrast variant

The contrast variant is used for situations that require placing emphasis on a button but without it being the primary action in the view.

Clear variant

The clear variant is the least emphasized style of button. It has no background fill.

Link variant

The link variant is similar to the clear variant. It has no background fill but inherits the anchor link color.

Negative variant

The negative button is for actions that can be destructive or have negative consequences if taken. Use it sparingly. This variant requires an Icon along with its label in order to show the semantic meaning and not rely solely on color.

Sizes

Buttons come in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Disabled

A button in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later.

Behaviors

Keyboard Focus

A button can be navigated using a keyboard. The keyboard focus state takes the button’s visual hover state and adds a ring to the button in focus, copying the color style of the variant.

Tooltip for Hidden Label

When the button label is hidden, a tooltip is shown on hover that displays the label text and, if appropriate, a keyboard shortcut.

Flexible Width

The width of a button automatically adjusts to fit the label text.

Full Width

In some cases, a full width button may be required. Common cases included mobile layouts and on narrow screens for responsive layouts. They can also span the full width of small cards and other components.

Cursor

Buttons use the default arrow cursor for all states, including hover and down. The only exception occurs on the web; if the button is using the href property it will display the pointer cursor instead.

Implementation

Button Variants

Variant implementation info

<button class="button">Default</button>
<button class="button" data-type="primary">Primary</button>
<button class="button" data-type="secondary">Secondary</button>
<button class="button" data-type="contrast">Contrast</button>
<button class="button" data-type="clear">Clear</button>
<button class="button" data-type="link">Link</button>
<button class="button" data-type="negative">Negative</button>
<button class="button" data-type="fab"><svg>...</svg><span class="fab-label">FAB</span></button>

Sizes

Size Implementation info

<button class="button" data-size="sm">Small</button>
<button class="button">Medium</button>
<button class="button" data-size="lg">Large</button>

Full Width

Buttons are normally inline elements. However, if you want a button to be a block element, add a block layout utility class. Alternatively, using the w-100% utility class will expand the button to the full width of its containing element, achieving the same look.

Hyperlink 
<button class="button" data-type="primary" data-display="block">Block button</button>
<a class="button" role="button" href="#/" data-type="primary" data-display="block">Hyperlink</a>

States

`:disabled` or `disabled` / Normal / `:hover` / `:active` or `active`

<button class="button" disabled>Default disabled</button>
<button class="button">Default</button>
<button class="button active">Default active</button>

<!-- Or -->

<a class="button disabled" href="javascript:void(0)">Default disabled</a>
<a class="button">Default</a>
<a class="button active">Default active</a>

With Icons

Add SVG or icon-font icons from anywhere. (These docs demonstrate SVG icons using [iconic icons](https://iconic.app/)). For SVG icons, set the height to match your line height (1.5rem = 24px). And within the SVG itself, set `stroke="currentColor"` to that it inherits the UI element text color.

<button class="button">
  <!-- Icon -->
  OK
</button>

Icon Only

Add icon-button to get icon only buttons with bespoke styles.

<button class="icon-button">
  <!-- Icon -->
</button>

Information Tab

Checklist

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).

All Color Schemes

Works properly across all color schemes (light, dark).

Accessible Contrast for Text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible Contrast for UI Components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Defined Options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).

Defined Behaviors

Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing Guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization Guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard Interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design Tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI Kit

Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.