Toast · DiSco

Visão geral

Disco adicionado com sucesso

A

ale_faria

adicionou Kind of Blue

roberto.vinyl

adicionou The Wall

Toast de sucesso flutuando sobre o feed

Anatomia

Disco adicionado à coleção

1

Container

rounded-xl px-4 py-3 shadow-lg max-w-xs w-fit · background e border dependem do tipo

2

Mensagem

text-sm font-medium text-center · concisa, máx. 1 linha · posicionado acima da bottom nav

3

Borda sutil

1px border com cor ligeiramente mais clara que o fundo. Adiciona definição sem peso visual.

Variantes

Sucesso

Disco adicionado à coleção

Lista criada com sucesso

Link copiado!

Cores

background: #152a15
border: 1px solid #14532d
color: #86efac

Exemplos de mensagem

"Disco adicionado à coleção"
"Lista criada com sucesso"
"Avaliação salva"
"Link copiado!"

Erro

Erro ao salvar. Tente novamente.

Você precisa estar conectado.

Algo deu errado.

Cores

background: #2a1515
border: 1px solid #7f1d1d
color: #fca5a5

Tom da mensagem

Direto, sem drama. Não culpabiliza o usuário. "Tente novamente." é suficiente.

Posicionamento

Flutuante acima da bottom nav. Múltiplos toasts empilham de baixo para cima (último no topo).

conteúdo

Disco adicionado à coleção

A

Posição

fixed bottom-24 left-1/2 -translate-x-1/2 z-50
(bottom-24 = 96px, acima da bottom nav + margem)

Entrada

@keyframes toast-in
from: opacity:0; translateY(8px)
to:   opacity:1; translateY(0)
duration: 0.25s ease

Saída

@keyframes toast-out
from: opacity:1; scale(1);    translateY(0)
to:   opacity:0; scale(0.96); translateY(6px)
duration: 0.22s ease forwards
dispara 220ms antes do auto-dismiss (3500ms)

Múltiplos

flex-col gap-2 items-center
(último toast fica mais acima)

Do / Don't

Disco adicionado à coleção

Faça Mensagem curta e específica. O usuário sabe exatamente o que aconteceu.

Operação concluída com êxito. Seu item foi processado.

Evite Mensagem longa e genérica. Toast some em 3,5s — não há tempo para ler textos longos.

Avaliação salva

Faça Use toast para confirmar ações silenciosas — o usuário não precisa de uma tela de confirmação.

Arquivo muito grande

Conexão perdida

Sessão expirada

Evite Disparar múltiplos toasts de erro simultaneamente sobrecarrega o usuário.

Specs

Propriedade	Sucesso	Erro
Background	`#152a15`	`#2a1515`
Border	`1px solid #14532d`	`1px solid #7f1d1d`
Cor do texto	`#86efac`	`#fca5a5`
Padding	`px-4 py-3`
Border radius	`rounded-xl` · 12px
Font size	`14px`
Font weight	`500` (medium)
Max width	`max-w-xs` (320px)
Width	`w-fit`
Alinhamento texto	`text-center`
Sombra	`shadow-lg`
Posição	`fixed bottom-24 left-1/2 -translate-x-1/2 z-50`
Entrada	`toast-in 0.25s ease` · translateY(8px)+scale(0.96) → 0
Saída	`toast-out 0.22s ease` · escala + translada para baixo
Auto-dismiss	3500ms total · saída inicia em 3280ms