# Retorno no lugar

O retorno de uma ação acontece onde ela aconteceu: o container mostra que está fazendo e como terminou, e as palavras vêm logo acima.

## A regra

Toda ação que leva tempo ou muda um estado responde no próprio container onde aconteceu: enquanto roda, o container esmaece e um traço à mão gira no meio; no fim, um certo em musgo ou um X em vinho, e o Notice entra logo acima, com as palavras. Nada de toast num canto da tela.

Resultado do teste:

### Lembrete

Nome

## Os três estados

Salvando…

Carregando

Salvo

Deu certo

Não salvou

Deu errado

## A sequência

-   **Carregando:** o esmaecido entra (320ms) e o traço gira até a resposta chegar. O container não recebe toque, e um segundo envio é ignorado.
-   **Deu certo:** o certo é desenhado em musgo, fica um instante, e o esmaecido sai. O Notice de sucesso entra logo acima.
-   **Deu errado:** o X é desenhado em vinho, fica um instante, e o esmaecido sai. O Notice de erro entra acima e recebe o foco; o que a pessoa escreveu continua lá.
-   **Movimento reduzido:** nada gira nem é desenhado; o desenho aparece pronto, e a palavra diz o resto.

## Bons e maus padrões

Faça assim

O formulário esmaece e mostra o certo; o aviso "Lembrete salvo" aparece logo acima dele.

O retorno aparece onde a pessoa está olhando, em qualquer tamanho de tela.

Não faça

Um toast "Salvo!" no canto de baixo da janela, que some em 3 segundos.

Num 4K, o canto está a meio metro do formulário: a pessoa salva e não vê se deu certo.

## Como escrever

-   Carregando: o verbo no gerúndio ("Salvando…", "Apagando…").
-   Fim: uma ou duas palavras ("Salvo", "Não salvou"). O Notice traz a frase inteira e o que fazer.

## Componentes

-   [StatusOverlay](../confirmacao.html#status-overlay): o esmaecido, o desenho e a palavra.
-   [Notice](../feedback.html#notice): as palavras do resultado, acima do container.
-   [Telas grandes](/pt/design/telas-grandes/): por que o retorno não vai para o canto.