Confirmation dialog


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.


Confirmation dialog styleguide


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


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.


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


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


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


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