Confirmation dialog

saving save cancel

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 feedback message. 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 triggerd, 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

Discard confirmation

Animation

Slide in and out

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

transition: translate 250ms ease

Confirmation dialog animation in and out

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