Button

View Storybook

A button is a UI element which allows users to take an action throughout the app. It is important a button is identifiable, consistent, and communicates its actions clearly, and is appropriately sized to its action.

Classes

Class Applies to Description
.d-btn N/A Base button style.
.d-btn__label N/A Wraps the button text label.
.d-btn--primary .d-btn Primary button style.
.d-btn--outlined .d-btn Outline button style.
.d-btn--danger .d-btn Base danger button style.
.d-btn--inverted .d-btn Base inverted button style.
.d-btn--loading .d-btn Loading button style.
.d-btn--circle .d-btn Circle button style.
.d-btn--brand .d-btn Branded button style.
.d-btn--xs .d-btn Applies extra small size.
.d-btn--sm .d-btn Applies small size.
.d-btn--lg .d-btn Applies large size.
.d-btn--xl .d-btn Applies extra large size.
.d-btn--disabled .d-btn Applies disabled style.
.d-btn__icon N/A Base style for including an icon with a label.
.d-btn__icon--left .d-btn__icon Positions the icon to the left of the text label.
.d-btn__icon--right .d-btn__icon Positions the icon to the right of the text label.

Examples

Dialtone provides three button styles:

  1. Base: Our default (purple) button colors.
  2. Danger: Buttons associated with potentially destructive actions. Appears as red.
  3. Inverted: For scenarios when you want to place a button on a non-white, dark background.

Each button style offers three levels of visual important:

  1. Primary: This is the highest visual importance a button can have. It provides a background color.
  2. Outlined: This button communicates slightly more importance than clear. It provides a border color, but no background color.
  3. Clear: This button communicates the least importance. It offers no background or border color. It appears as a link with matching padding. This is typically used for secondary or minimally important actions. This is the default importance level of all buttons.

Base

The base button should be the go-to button for most of your needs. When in doubt, use this style. To help provide clarity to users, it is generally recommended to use only one primary button style within a section or page.

Danger

The danger button style is used to communicate destructive actions such as deleting content, accounts, or canceling services.

Inverted

The inverted button style is used to visually separate buttons set on darker backgrounds.

Disabled

Buttons can be disabled using either the disabled attribute or a Dialtone class. Use the attribute when a button should appear disabled and not recieve focus; use the class when a button should appear disabled but still recieve focus (i.e. a disabled button with a tooltip). Using the class also requires aria-disabled and additional implementation to prevent the click event.

All button styles and variations appear the same when disabled.

Cursor Styles

When using the disabled Dialtone button class, cursor styles must be added through a wrapper as pointer events are disabled.

Buttons can be styled as a link in situations for which you need the appearance of a link but behavior of a button. Using the button element provides a better accessibility experience.

Loading

Loading buttons are useful for communicating a delay between the button interaction and its action taking place. Every button style can accept the loading button class, though we only provide a few possible examples.

Circle Button

Sometimes an icon-only, circle button is desired. These buttons are used for toggling actions, navigation, or closing UI elements. Only the following styles accept circle button classes.

With Icons

Button labels can include an icon to the left or the right of text. Every button style can accept icon classes, though we only provide a few possible examples.

Branded

We provide the following branded buttons for log-in and sign-up workflows.

Sizes

The base button font size is 16px and should be used in most cases. Every button style can accept size classes, though we only provide a few possible examples.

Accessibility

  • Disabled buttons don't require focus.
  • If using .d-btn--disabled, also use aria-disabled="true" and be sure to prevent the click event.
  • If an icon and text are both included in a button's label, and they both represent the same thing, the icon may be decorative and may not need to receive focus or be read-out.
  • If developing a toggle button (i.e. a button that holds a pressed/unpressed state), use aria-pressed. (Source)
  • If developing a button that triggers a dropdown, consider using aria-haspop and aria-expanded. (Source)