Buttons

Buttons are UI elements which allow users to take actions throughout the app. It is important they are identifiable, consistent, communicate their actions clearly, and are appropriately sized to their action.

Styles

Dialtone provides three levels of visual importance for buttons within three different visual styles. The three levels of visual importance are:

  1. 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.
  2. Outlined: This button communicates slightly more importance than clear. It provides a border color, but no background color.
  3. Primary: This is the highest visual importance a button can have. It provides a border and a background color.

These button styles are provided in three visual styles are:

  1. Default / Blue: Our normal blue 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.

Default

The default button offers three button styles. To help provide clarity to users, it is recommended that only one button have the primary button style within a section or page.

Please note that all button classes have hover, active, focus, and disabled states within them. Specific classes are provided for the disabled state so this can be applied to objects that aren't buttons (or can't use the disabled attribute).
Name Class Default Class Disabled
Default .d-btn .d-btn--disabled
Outlined .d-btn--outlined .d-btn--outlined--disabled
Filled .d-btn--primary .d-btn--primary--disabled
.example-clear-btn {
.d-btn;
}
.example-call-btn {
.d-btn--outlined;
}
.example-submit-btn {
.d-btn--primary;
}

Danger

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

Name Class Default Class Disabled
Default .d-btn--danger .d-btn--danger--disabled
Outlined .d-btn--danger--outlined .d-btn--danger--outlined--disabled
Filled .d-btn--danger--primary .d-btn--danger--primary--disabled
.danger-clear-btn {
.d-btn--danger;
}
.danger-call-btn {
.d-btn--danger--outlined;
}
.danger-submit-btn {
.d-btn--danger--primary;
}

Inverted

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

Name Class Default Class Disabled
Default .d-btn--inverted .d-btn--inverted--disabled
Outlined .d-btn--inverted--outlined .d-btn--inverted--outlined--disabled
Filled .d-btn--inverted--primary .d-btn--inverted--primary--disabled
.inverted-clear-btn {
.d-btn--inverted;
}
.inverted-call-btn {
.d-btn--inverted--outlined;
}
.inverted-submit-btn {
.d-btn--inverted--primary;
}

Variations

Loading Buttons

If there is a delay between the user clicking a button and the action taking place, apply a loader to communicate that something is happening.

Name Class Clear Outlined Filled
Default .d-btn-loading
Circle .d-btn-loading--dark
Danger .d-btn-loading--danger
Inverted .d-btn-loading--white

Circle Buttons

Sometimes an icon-only, circle button is desired. These buttons are used for toggling actions, navigation, or closing UI elements.

Name Class Examples
Muted
A muted, gray-scale button style for clickable icon buttons.
.d-btn--circle
.d-btn--circle--disabled
Outlined
An outlined, gray-scale button style that helps draw more attention to clickable icon buttons.
.d-btn--circle--outlined
.d-btn--circle--outlined--disabled
Danger Hover
Initially looks like the muted, grayscale button, but on hover it uses danger colors to help communicated potentially destructive actions. These are used for actions such as closing a panel or disconnecting a user from a call.
.d-btn--circle--danger-hover
.d-btn--circle--danger-hover--disabled
Danger
A simple danger button style for clickable icon buttons. This is used mainly for showing disabled action states.
.d-btn--circle--danger
.d-btn--circle--danger--disabled
Danger Primary
A primay, danger button style for clickable icon buttons. This is used for major actions such as ending a call.
.d-btn--circle--danger--primary
.d-btn--circle--danger--primary--disabled
Inverted
An inverted button style for when you want a white icon color.
.d-btn--circle--inverted
.d-btn--circle--inverted--disabled
Inverted Outlined
An inverted, outlined button style.
.d-btn--circle--inverted--outlined
.d-btn--circle--inverted--outlined--disabled
Inverted Primary
An inverted, filled button style.
.d-btn--circle--inverted--primary
.d-btn--circle--inverted--primary--disabled

Icon Buttons

Occassionally buttons may have icons placed next to the button label. In those instances, use the following layout examples as a guide.

Name Example
Left align
Left align the icon and the label within a button.
Split left
Left align the icon, but still center the label within the remaining space in the button.
Center align
Center align the icon and the label within a button.
Right align
Left align the label, but right align the icon.

Brand Buttons

We provide the following branded buttons for single sign-on screens.

Name Class Examples
Google .d-btn--google
Office 365 .d-btn--o365
LinkedIn .d-btn--linkedin

Sizes

The default button font-size is 16px. To change the button’s font-size, use the following classes:

Name Class Size Examples
Extra Small .d-btn--xs 12px
Small .d-btn--sm 14px
Default N/A 16px
Large .d-btn--lg 20px
Extra Large .d-btn--xl 24px