# Feedback

## Purpose

Toasts, alerts, progress, loaders and empty states.

## Decisions

- **Toasts:** a toast **pauses its timer while the mouse is over it or it has keyboard focus**, and restarts when it leaves. A mostly quiet bottom-centre system: a single line with a coloured icon and border, **up to 3 stacked**, and a close button. Normal toasts disappear after about 5 seconds. Toasts that report an **error can also show a description** line (grey, under the message), and **errors disappear too, but stay longer** than other toasts: **10 seconds**. They slide in at the slow speed and enter curve from [Motion](../foundations/motion.md), with the floating-layer shadow from [Elevation and Depth](../foundations/elevation-and-depth.md).
- **Banners:** a rounded 12px inline block at the top of the content, with the colour on its icon and border.
- **Progress bar:** the thin **4px** bar with the percentage on the right (determinate), with the gradient fill. On mobile the 8px bar may be used instead.
- **Indeterminate (unknown length) progress:** use the **full bar of flowing gradient** where there is room, or the **gradient spinner** where the space is small. The label goes **on the right** and must say what is actually loading (for example "Uploading report.pdf"). There is **never a generic "Working…"**: if a specific label is not worth showing, show no label. Where the thing loading is obvious, such as an image, show only the spinner.
- **Empty state:** a grey icon, title, one line of text and an action button.
- **Error state (something failed to load a page):** centred in the page like an empty state, with a red-pink icon and a "Try again" button.
- **Confirm dialog:** on desktop, cancel on the left and the action on the right; on mobile, stacked and centred, with the stacked buttons **the same width**.
- **Count badge:** red-pink with soft white text.