# Feedback in place

The feedback of an action happens where it happened: the container shows that it is working and how it ended, and the words come right above.

## The rule

Every action that takes time or changes a state answers in the very container where it happened: while it runs, the container dims and a hand-drawn stroke spins in the middle; at the end, a check in moss or an X in wine, and the Notice comes in right above, with the words. No toast in a corner of the screen.

Test result:

### Reminder

Name

## The three states

Saving…

Loading

Saved

It worked

Not saved

It failed

## The sequence

-   **Loading:** the dim comes in (320ms) and the stroke spins until the answer arrives. The container takes no taps, and a second submit is ignored.
-   **It worked:** the check is drawn in moss, stays for a moment, and the dim leaves. The success Notice comes in right above.
-   **It failed:** the X is drawn in wine, stays for a moment, and the dim leaves. The error Notice comes in above and takes focus; what the person wrote is still there.
-   **Reduced motion:** nothing spins or gets drawn; the drawing appears finished, and the word says the rest.

## Do and don’t

Do

The form dims and shows the check; the "Reminder saved" notice appears right above it.

Feedback shows where the person is looking, on any screen size.

Don’t

A "Saved!" toast in the bottom corner of the window that disappears in 3 seconds.

On a 4K screen, the corner is half a meter from the form: the person saves and does not see whether it worked.

## Writing

-   Loading: the verb in -ing ("Saving…", "Deleting…").
-   End: one or two words ("Saved", "Not saved"). The Notice carries the whole sentence and what to do.

## Components

-   [StatusOverlay](../confirmacao.html#status-overlay): the dim, the drawing and the word.
-   [Notice](../feedback.html#notice): the words of the result, above the container.
-   [Large screens](/en/design/telas-grandes/): why feedback does not go to the corner.