Alert


                    <x-ui.alert>

Recado na página: confirmação, erro de formulário, aviso de manutenção. Neutro por padrão, colorido no ponto de uso.

Cor no ponto de uso

Mensagem enviada

Respondemos no mesmo dia útil.

Revise os campos marcados antes de enviar.

Atendimento em horário reduzido nesta sexta.

blade

<x-ui.alert icon="heroicon-m-check-circle" title="Mensagem enviada" live class="border-green-200 bg-green-50 text-green-800">
    Respondemos no mesmo dia útil.
</x-ui.alert>

<x-ui.alert icon="heroicon-m-exclamation-triangle" class="border-amber-200 bg-amber-50 text-amber-900">
    Revise os campos marcados antes de enviar.
</x-ui.alert>

<x-ui.alert icon="heroicon-m-information-circle" variant="filled" dismissible>
    Atendimento em horário reduzido nesta sexta.
</x-ui.alert>

Variantes

Padrão, com borda.

Ghost, sem fundo.

blade

<x-ui.alert>Padrão, com borda.</x-ui.alert>
<x-ui.alert variant="ghost">Ghost, sem fundo.</x-ui.alert>

Props

x-ui.alert

Prop	Padrão	Aceita
title	null
icon	null
variant	null	default filled ghost
dismissible	false
live	false

Personalizar

As três camadas estão explicadas em Começar aqui. Abaixo, o que este componente expõe a cada uma.

Ui::alert()

Partes

part() e replacePart() aceitam: base, icon, body, title, content e dismiss.

Tokens que ele lê

Redefina no @theme do site: --radius-control, --radius-surface e --font-weight-control.

Por que é assim 3 notas

Não existe variante success/danger aqui pelo mesmo motivo do badge: a cor semântica vem da paleta do Tailwind no ponto de uso, e a classe passada substitui a do variant em vez de somar.
live é o que acrescenta role="alert". Um aviso que já estava na página quando ela abriu não deve interromper a leitura; um que aparece depois do envio, sim.
dismissible marca o bloco com data-alert, e o initUi() cuida do resto — sem ele, nenhum listener é registrado.