Ravox KitBásicos
Aviso
A mensagem que fica na tela, dentro do conteúdo: info, sucesso, atenção e erro, cada um com o seu ícone. Título, texto, uma ação que desce para baixo quando o espaço aperta e o X de fechar.
Seu cartão vence em 5 dias
Atualize os dados antes de 03/10 para a assinatura não parar.
Ajustes
Tipo
Variante
Exemplos
Os quatro tipos
Seu relatório fica pronto em uns 2 minutos.
Produto publicado na loja.
Restam 3 unidades do tamanho M.
O cupom BEMVINDO10 expirou ontem.
Erro de formulário
Revise 2 campos antes de salvar
- CNPJ com dígito verificador inválido
- CEP não encontrado
Com ação
Você usou 90% do plano
4.500 de 5.000 envios este mês.
Variante cheia
Assinatura suspensa
O Pix de setembro não caiu. Seus designs continuam salvos por 30 dias.
Manutenção hoje às 23h: o painel fica fora do ar por 20 minutos.
Fechável
Modo de manutenção no domingo
Entre 2h e 4h o painel fica só para leitura.
Instalação
O shadcn cria components/ui/aviso.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/aviso.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| tipo | "info" | "sucesso" | "atencao" | "erro" | "info" | Cor e ícone. Erro e atenção saem como role="alert"; info e sucesso como role="status". |
| variante | "neutra" | "cheia" | "neutra" | Neutra: fundo do cartão e a cor só no ícone. Cheia: bloco sólido na cor do tipo, para o que não pode passar batido. |
| titulo | ReactNode | — | Linha em destaque. O children vira o texto de apoio. |
| acao | ReactNode | — | Botão ou link. Fica à direita quando cabe, embaixo do texto quando não. |
| icone | ReactNode | false | — | Troca o ícone do tipo; false tira o ícone. |
| aoFechar | () => void | — | Mostra o X e chama a função. Quem esconde o aviso é você. |
| rotuloFechar | string | "Fechar aviso" | Nome do X para leitores de tela. |
| ...props | ComponentProps<"div"> | — | Tudo o que um <div> aceita. Passe role para trocar o papel padrão. |