Introduction

The Toast Feedback is a short message displayed at the bottom of the screen after the user removes a favorite. It confirms the action, and it offers an Undo button to put the favorite back. It stays on screen for a few seconds, over the content, then disappears on its own.

Anatomy

The three parts

The toast is a dark bar with three parts in a row, a check icon on the left, the message, which is a Text, and the Undo Button on the right. The message and the label of the button follow the language of the app.

Spacing

The spacing is fixed, whatever the device. There are 16px between the edge of the toast and the icon, 12px between the icon and the message, 12px between the message and the button, 16px after the button, and 12px above and below the row. The icon is 24px, the message is written in the system font in 14px, and Undo is a small Button with a 14px label.

Properties

Background, shape, shadow and border

The toast carries its own Background, Shape, Shadow and Border, which do not follow the ones of the app. By default, it has a dark background with a white message, rounded corners, a level 1 shadow and no border. The Undo button has its own dark grey background, the same rounded corners, and no shadow.

Layout

Position

The toast appears at the bottom of the screen, over the content, with a margin on each side. On a phone, it sits above the TabBar. On a computer, it is centered at the bottom of the window.

Behavior

Appear and disappear

The toast disappears on its own after a few seconds. When it appears, the item has already left the list. In a list on one column, the item slides out to the left, and in a grid it fades out.

Undo

A tap on Undo puts the favorite back in the list and closes the toast. When several favorites are removed one after the other, the toast does not stack. It is updated with each removal, and Undo restores the last favorite removed.