Ravox KitSobreposição

Notificação

Chame notificar() de qualquer lugar e ponha <Notificacoes /> uma vez no layout. Sucesso, erro, info, aviso, carregando e promessa; botão de ação (Desfazer); empilha em leque, abre em lista no hover, pausa o tempo e dispensa arrastando para o lado.

Clique algumas vezes para empilhar; passe o mouse na pilha para abrir a lista. Alt+N leva o foco até ela.

Ajustes

Tipo

Posição

DescriçãoBotão Desfazer

Exemplos

Os tipos

Promessa

Desfazer

Atualizar no lugar

Instalação

O shadcn cria components/ui/notificacao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/notificacao.json

Opções

Opção	Tipo	Padrão	O que faz
notificar(titulo, opcoes)	(ReactNode, OpcoesNotificacao) => id	—	Mostra uma notificação e devolve o id. Também: notificar.sucesso, .erro, .info, .aviso e .carregando.
notificar.promessa(p, msgs)	(Promise \| () => Promise, { carregando, sucesso, erro }) => Promise	—	Mostra carregando e troca por sucesso ou erro quando a promessa termina. sucesso e erro podem ser funções do resultado.
notificar.dispensar(id?)	(id?) => void	—	Tira uma notificação. Sem id, tira todas.
opcoes.descricao	ReactNode	—	Segunda linha, mais apagada.
opcoes.acao	{ rotulo, aoClicar }	—	Um botão (ex.: Desfazer). Com ação, a notificação fica no mínimo 8 s.
opcoes.id	string \| number	—	Reusar o id atualiza no lugar (ex.: carregando → pronto).
opcoes.duracao	number	5000	Tempo na tela em ms; Infinity fica até dispensar.
opcoes.aoSumir	() => void	—	Chamado quando a notificação sai (tempo, X, arraste ou dispensar).
<Notificacoes posicao>	"cima-esquerda" \| "cima-centro" \| "cima-direita" \| "baixo-esquerda" \| "baixo-centro" \| "baixo-direita"	"baixo-direita"	Onde a pilha fica. No celular, sempre na largura da tela.
<Notificacoes maximo duracao fechar expandidas>	number / number / boolean / boolean	3 / 5000 / true / false	Quantas aparecem no leque, o tempo padrão, o X em todas e a lista sempre aberta.