Introduction

The confirmation dialog appears to confirm setting changes via save or cancel button. It is part off all settings views.

Confirmation dialog example

The confirmation dialog enables saving bulk changes conveniently. It provides information about consequences of the changes before saving them.

Styleguide

Confirmation dialog styleguide

Bar

x: 8px
y: 20px
height: 56px
width: 100%
background-color: $gray-700
padding: 20px

Description

font-family: Bernina Sans Regular
font-size: 14px
color: #fff
vertical-align: center

Please use a primary button to save changes and a secondary button to discard changes.

Behavior

Any settings changes trigger the confirmation bar, it slides in from the bottom. The description will be updated according to the users changes.

Confirmation

The save changes button triggers a loading distractor with in the save changes button. After the save changes button is triggered, the discard changes and save changes buttons are disabled. Once the changes have been saved a feedback message is triggered. After 800ms, the whole dialog slides out to the bottom. In order to avoid unintended changes, the discard changes action needs to be confirmed. When the button is triggered, it gets replaced by yes and no buttons for confirmation, the save changes action is disabled.

Saving feedback

Icon

Checkmark icon
width: 20px
height: 20px
color: #fff
Loading distractor
Please use a button with a loading distractor
width: 16px
height: 16px
color: #fff
Error feedback
Error messages when possible, should always reflect the error recieved.

Icon

Incident icon
width: 20px
height: 20px
color: #fff
Discard confirmation

Animation

Slide in and out

The confirmation dialog slides in from the bottom and slides out to the bottom.

Confirmation dialog animation in and out
transition: translate 250ms ease

Leaving the context

To prevent users from navigating without saving, an overlay interrupts the action and forces the user to make a decision. Before navigating, the overlay as well as the confirmation dialog disappear.

Overlay when leaving the context

Background overlay

width: 100%
height: 100%
background-color: rgba(255, 255, 255, 0.6)

Confirmation dialog on smaller screens

Confirmation dialog on mobile screens