componentes / banner

Banner

Mensagem de página inteira, com ação opcional e botão de fechar.

Como usar

Ocupa a largura do container, sem arredondamento, então coloque-o no topo da página. Use para janelas de manutenção, anúncios e avisos de teste. Mesmos roles de status do `Alert`.

preview

Manutenção programada hoje às 22h.

Banner.tsx

import { Banner, Button } from "vaiperui";
 
<Banner
  action={<Button size="sm" variant="transparent">Saiba mais</Button>}
  onDismiss={() => setOpen(false)}
>
  Manutenção programada hoje às 22h.
</Banner>

Cores

preview

primary

success

warning

danger

cores.tsx

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

Tamanhos

preview

tamanhos.tsx

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

Cor personalizada

preview

Violeta

cor-personalizada.tsx

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

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
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

Mesmos roles do `Alert`: `role="alert"` para `warning` e `danger`, `role="status"` para `primary` e `success`; `role` pode ser sobrescrito.
O banner é um `div` simples, não um landmark; ele não recebe `role="banner"`.
O ícone de status é `aria-hidden`.
O botão de fechar é um `<button>` real com `aria-label` vindo de `dismissLabel` (padrão "Dismiss").
O slot `action` renderiza o seu elemento; mantenha-o um botão ou link focável.

Tenha em mente

Traduza `dismissLabel`; o padrão é em inglês.
Não dependa só da cor; o texto da mensagem deve dizer o que aconteceu.
Fechar não gerencia o foco, e um banner exibido no carregamento pode não ser anunciado por todos os leitores de tela.