Snackbars provide brief notifications. The component is also known as a toast.

They inform users of a process that an app has performed or failed to perform.

Anatomy

Snackbars in Qredo are composed by:

Untitled

Positioning

The snackbar is positioned at the bottom left corner of the page, as this area is bound to have more consistent and less busy UI elements.

Distance from screen edge: 16px bottom and 16px left.

Untitled

Stacking

When multiple snackbars need to be shown on the page they will stack vertically on top of each other, pushing the oldest to the top.

Untitled