componentes / alert

Alert

Mensagem inline com título, descrição, ícone, ação opcional e botão de fechar.

Como usar

Use para feedback ligado a um lugar da página, como validação de formulário ou status de integração. `warning` e `danger` são anunciados de forma assertiva (`role="alert"`), os demais de forma educada. O botão de fechar só aparece com `onDismiss`. Para avisos temporários use `Toast`, para os da página inteira `Banner`.

preview

Salvo

Suas alterações foram salvas.

Alterações não salvas

Você tem edições pendentes.

Alert.tsx

import { Alert, Button } from "vaiperui";
 
<Alert variantColor="success" title="Salvo">
  Suas alterações foram salvas.
</Alert>
<Alert
  variantColor="warning"
  title="Alterações não salvas"
  action={<Button size="sm" variant="transparent">Salvar agora</Button>}
  onDismiss={() => setOpen(false)}
>
  ...
</Alert>

Cores

preview

primary

success

warning

danger

cores.tsx

<Alert variantColor="primary">primary</Alert>
<Alert variantColor="success">success</Alert>
<Alert variantColor="warning">warning</Alert>
<Alert variantColor="danger">danger</Alert>

Tamanhos

preview

tamanhos.tsx

<Alert size="sm">sm</Alert>
<Alert size="md">md</Alert>
<Alert size="lg">lg</Alert>

Cor personalizada

preview

Violeta

cor-personalizada.tsx

<Alert customColor="#8b5cf6">Violeta</Alert>

Props

Prop	Valores	Padrão	Descrição
variantColor	primary \| success \| warning \| danger	primary	Cor e ícone padrão. warning e danger usam role=alert, os demais role=status
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema). Substitui o variantColor
size	sm \| md \| lg	md	Espaçamento e tamanho do texto
radius	none \| sm \| md \| lg \| full	lg	Arredondamento dos cantos
title	ReactNode	nenhum	Resumo em negrito acima da descrição (os children)
icon	ReactNode \| false	ícone de status	Seu próprio ícone, ou false para ocultar
action	ReactNode	nenhum	Espaço para uma ação, como um Button pequeno transparente ou um link
onDismiss	() => void	nenhum	Mostra o botão de fechar e roda ao clicar; você decide se desmonta
dismissLabel	string	Dismiss	Nome acessível do botão de fechar
(nativas)	HTMLAttributes<HTMLDivElement>	nenhum	role (substitui o padrão), className, style, aria-*, ref etc.

Acessibilidade

`warning` e `danger` usam `role="alert"` (assertivo); `primary` e `success` usam `role="status"` (educado).
Passe `role` para sobrescrever o padrão, por exemplo `role="status"` em um alerta `danger` que não deve interromper.
O ícone de status padrão é `aria-hidden`; é decoração e não tem significado para leitores de tela.
O botão de fechar é um `<button>` real com `aria-label` vindo de `dismissLabel` (padrão "Dismiss") e anel de foco visível.
O slot `action` renderiza o seu elemento, então mantenha-o focável (botão ou link) com um rótulo claro.

Tenha em mente

Traduza `dismissLabel` você mesmo; o padrão é em inglês.
Não dependa só da cor: sempre inclua um `title` ou texto que diga o significado.
Fechar não move o foco; se o foco estava dentro do alerta, leve-o a um lugar adequado no `onDismiss`.