Toast · DiSco

Visão geral

Disco adicionado à coleção

Erro ao salvar. Tente novamente.

Link copiado!

Você precisa estar conectado.

Sucesso

Confirmação de ação bem-sucedida. Fundo verde escuro com texto verde claro.

Erro

Falha em operação. Fundo vermelho escuro com texto vermelho claro. Nunca inclui ação de retry no toast.

Anatomia

1

2

3

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

auto-dismiss após 3500ms
fade-out: opacity 0.3s ease

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 → 0)
Auto-dismiss	3500ms + fade-out 0.3s