Nim, the Okta Design System

Buttons

Buttons are primarily used for in-page interactions like form submissions.

Variants

Buttons are primarily used for in-page interactions like form submissions.

Primary

Primary buttons, our default, are used for the principal action in a view. For example, "Save".

<button class="ods-button">Primary</button>
<button class="ods-button" disabled>Primary</button>

Secondary

Secondary buttons indicate other safe actions a user might take.

<button class="ods-button is-ods-button-secondary">Secondary</button>
<button class="ods-button is-ods-button-secondary" disabled>Secondary</button>

Danger

These buttons indicate actions that, while the primary focus of a view, are dangerous or destructive. For example, "Delete".

<button class="ods-button is-ods-button-danger">Danger</button>
<button class="ods-button is-ods-button-danger" disabled>Danger</button>

Overlay

These buttons may only be used on top of a “Base Color” such as Purple 500, or on top of a photo or illustration. They should only be used in the scenario where Primary, Secondary, and Clear buttons cannot be used.

Lastly, they only exist at the Large size.

<button class="ods-button is-ods-button-overlay">Overlay</button>
<button class="ods-button is-ods-button-overlay" disabled>Overlay</button>

Clear

These are used for in-page interactions that modify the visible UI but do not modify data or an ongoing process. For example, hiding or showing a password field.

They also pair well with Primary and Secondary buttons.

<button class="ods-button is-ods-button-clear">Clear</button>
<button class="ods-button is-ods-button-clear" disabled>Clear</button>

Guidelines

Do use buttons to indicate the important actions that can be taken in a view.

Don't use buttons to navigate users around the site or product; use links instead.

Accessibility

Buttons should display a visible :focus state with users interact via keyboard.

Color is not a clear affordance for all users, please use clear, concise copy to label buttons. Good rules of thumb: use three or less words to describe your action; start your label with a verb (e.g. "Download Report" vs "Report PDF").

Use the <button> element instead of <a> whenever possible. The keyboard and screen reader interaction for these elements is different. Space will trigger a <button>; Enter will trigger an <a>.

Implementation

SCSS

Styles related to buttons can be found in /components/_button.scss.

Semantic states can be combined to produce Secondary Danger styles.

Selector Purpose
.ods-button Applies primary & general button styles
.is-ods-button-secondary Applies Secondary button styles
.is-ods-button-danger Applies Danger button styles