Alert

Bloco estático (`mk-alert`) para mensagens de estado persistentes dentro do fluxo do layout — diferente do `mk-toast`, que é flutuante e temporário.

O mk-alert reaproveita a linguagem visual do mk-toast — variantes, ícones e cores de destaque — como um bloco estático dentro do fluxo do documento. Ele fica sempre visível enquanto presente no DOM, sem timer de auto-dispensa e sem posicionamento fixo. Use para resumos de validação em formulários, banners de página ou seção, e avisos inline acima de tabelas, gráficos ou listas. A presença do alerta na tela é responsabilidade da aplicação consumidora, via renderização condicional.

Padrão

import { MkAlert } from '@db1/makuco-ui-react';

<MkAlert
  heading="Dados desatualizados"
  description="Atualize a página para ver as informações mais recentes."
/>

<mk-alert
  heading="Dados desatualizados"
  description="Atualize a página para ver as informações mais recentes."
></mk-alert>

Variantes

Quatro variantes semânticas — error, success, warning e info — comunicam cor de destaque e ícone distintos.

<MkAlert
  variant="error"
  heading="Erro de validação"
  description="Corrija os campos destacados antes de continuar."
/>
<MkAlert
  variant="success"
  heading="Ação concluída"
  description="Suas alterações foram salvas com sucesso."
/>
<MkAlert
  variant="warning"
  heading="Atenção"
  description="Esta ação pode ter consequências irreversíveis."
/>
<MkAlert
  variant="info"
  heading="Informação"
  description="Seu relatório está sendo gerado em segundo plano."
/>

<mk-alert
  variant="error"
  heading="Erro de validação"
  description="Corrija os campos destacados antes de continuar."
></mk-alert>
<mk-alert
  variant="success"
  heading="Ação concluída"
  description="Suas alterações foram salvas com sucesso."
></mk-alert>
<mk-alert
  variant="warning"
  heading="Atenção"
  description="Esta ação pode ter consequências irreversíveis."
></mk-alert>
<mk-alert
  variant="info"
  heading="Informação"
  description="Seu relatório está sendo gerado em segundo plano."
></mk-alert>

Com ação

Defina actionLabel para exibir um botão de texto ao final do alerta. Ele emite mkActionClick ao ser clicado ou ativado via Enter/Space — a aplicação decide o efeito (revalidar, navegar, tentar novamente, etc.).

<MkAlert
  variant="error"
  heading="Falha ao carregar dados"
  description="Não foi possível conectar ao servidor."
  actionLabel="Tentar novamente"
  onMkActionClick={handleRetry}
/>

<mk-alert
  variant="error"
  heading="Falha ao carregar dados"
  description="Não foi possível conectar ao servidor."
  action-label="Tentar novamente"
  (mkActionClick)="handleRetry()"
></mk-alert>

Props — mk-alert

Prop	Tipo	Padrão	Descrição
`variant`	`"error" \| "success" \| "warning" \| "info"`	`"info"`	Define a cor de destaque, o ícone e a semântica ARIA do alerta.
`heading`	`string`	—	Título em negrito exibido no início do bloco de texto.
`description`	`string`	—	Texto complementar exibido em seguida ao heading, na mesma linha.
`actionLabel`	`string`	—	Rótulo do botão de ação. Quando presente, o botão é renderizado e passa a emitir `mkActionClick`.

Eventos

Evento	Payload	Descrição
`mkActionClick`	`void`	Emitido ao clicar (ou ativar via Enter/Space) no botão de ação. Disparado apenas quando `actionLabel` está definido.

Acessibilidade

Variantes error e warning usam role="alert"; variantes success e info usam role="status".
aria-labelledby aponta para o elemento do heading sempre que heading está definido; aria-describedby aponta para o elemento da descrição sempre que description está definido.
O botão de ação é um <button> nativo — recebe foco pelo Tab e responde a Enter/Space sem lógica adicional. Quando não há ação, o alerta não participa da ordem de tabulação.
A cor da variante nunca é o único indicador — o ícone reforça a semântica para usuários com daltonismo.
Como o alerta normalmente já está presente na renderização inicial, o role não dispara anúncio automático nesse caso — mas garante o comportamento correto caso a aplicação insira o alerta dinamicamente no DOM (ex.: após submissão de formulário).