Ravox KitBasics
Alert
A message that stays on screen, inside the content: info, success, warning and error, each with its own icon. Title, text, an action that moves below when space is tight, and a close button.
Seu cartão vence em 5 dias
Atualize os dados antes de 03/10 para a assinatura não parar.
Settings
Toggles
Examples
The four types
Seu relatório fica pronto em uns 2 minutos.
Produto publicado na loja.
Restam 3 unidades do tamanho M.
O cupom BEMVINDO10 expirou ontem.
Form error
Revise 2 campos antes de salvar
- CNPJ com dígito verificador inválido
- CEP não encontrado
With action
Você usou 90% do plano
4.500 de 5.000 envios este mês.
Solid variant
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.
Dismissible
Modo de manutenção no domingo
Entre 2h e 4h o painel fica só para leitura.
Installation
The command creates components/ui/alert.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add alertProps
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "info" | "success" | "warning" | "error" | "info" | Color and icon. Error and warning render as role="alert"; info and success as role="status". |
| variant | "subtle" | "solid" | "subtle" | Subtle: card background with color only on the icon. Solid: a solid block in the status color, for what can't be missed. |
| title | ReactNode | — | Highlighted line. The children become the supporting text. |
| action | ReactNode | — | Button or link. Sits on the right when it fits, below the text when it doesn't. |
| icon | ReactNode | false | — | Replaces the status icon; false removes the icon. |
| onClose | () => void | — | Shows the X and calls the function. Hiding the alert is up to you. |
| closeLabel | string | "Close alert" | Name of the X for screen readers. |
| ...props | ComponentProps<"div"> | — | Everything a <div> accepts. Pass role to change the default role. |