AppAlert

Moléculas

Aviso em linha com ícone, título opcional, mensagem e ação.

Quando usar: instruções antes de um formulário (onde encontrar o CNPJ e o número do cupom), aviso antes de uma confirmação definitiva, erro geral de um envio ou sucesso de uma etapa.

Quando não usar: erro de um campo específico (use o error do campo) ou confirmação passageira de uma ação (use AppToast).

Importar

import { AppAlert } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppAlert.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppAlert.css';

Exemplos

Tons

const Tons = () => (
  <div style={{ display: 'grid', gap: 12 }}>
    <AppAlert tone="info">Informação para você.</AppAlert>
    <AppAlert tone="success">Operação concluída.</AppAlert>
    <AppAlert tone="warning">Confira os dados informados.</AppAlert>
    <AppAlert tone="danger">Não foi possível concluir.</AppAlert>
  </div>
);

Com Titulo

const ComTitulo = () => <AppAlert tone="success" title="Tudo certo">Seu cadastro foi confirmado.</AppAlert>;

Com Acao

const ComAcao = () => <AppAlert
    action={<a href="#orientacoes">Clique aqui para saber onde encontrar o CNPJ e o número do cupom fiscal</a>}>Para saber onde encontrar o CNPJ e o número do cupom fiscal, consulte as orientações.</AppAlert>;

Dispensavel

const Dispensavel = () => <Dismissible />;

Confirmacao De Cupom

const ConfirmacaoDeCupom = () => <AppAlert tone="warning" title="Atenção">Estas informações não poderão ser alteradas após a confirmação.</AppAlert>;

Props

Prop	Tipo	Padrão	Descrição
`children`*	`ReactNode`	`—`	Mensagem do aviso.
`action`	`ReactNode`	`—`	Ação abaixo da mensagem, como um link ou botão.
`icon`	`ReactNode`	`—`	Ícone à esquerda. Padrão: um ícone por tom; `false` remove o ícone. Decorativo.
`live`	`boolean`	`false`	Anuncia o aviso para leitores de tela quando ele aparece depois de uma ação (`danger`/`warning` como alerta, os demais como status). Deixe `false` para avisos que já estão na página ao carregar. Padrão: `false`.
`onDismiss`	`(() => void)`	`—`	Mostra o botão "Fechar aviso" e é chamado ao clicar nele. Quem usa remove o aviso (o fechamento é controlado): assim o mesmo aviso volta a aparecer se a condição se repetir, como um novo erro no envio.
`title`	`ReactNode`	`—`	Título curto em destaque, acima da mensagem.
`tone`	`"success" \| "info" \| "warning" \| "danger"`	`info`	Tom da mensagem: muda cor e ícone. Padrão: `'info'`.