MeAlert

Chip de alerta para exibir mensagens informativas, de aviso, perigo ou sucesso.

Playground

Importação

<script>
import { MeAlert } from '@me/ui-vue3'
</script>

Uso Básico

O alerta pode receber conteúdo via prop message ou slot default.

infoEste é um alerta informativo.

<MeAlert message="Este é um alerta informativo." />

info Conteúdo via slot

<MeAlert>Conteúdo via <strong>slot</strong></MeAlert>

TIP

Quando message está definida, o slot default é ignorado.

Variantes

Quatro variantes para diferentes contextos de feedback.

infoInformativo: verifique os detalhes.

error_outlineAviso: esta ação pode ter consequências.

report_problemPerigo: operação não pode ser desfeita.

check_circleSucesso: operação concluída.

<MeAlert variant="info" message="Informativo: verifique os detalhes." />
<MeAlert variant="warning" message="Aviso: esta ação pode ter consequências." />
<MeAlert variant="danger" message="Perigo: operação não pode ser desfeita." />
<MeAlert variant="success" message="Sucesso: operação concluída." />

Via props booleanas

Também é possível ativar a variante com props booleanas diretas.

infoVariante info

error_outlineVariante warning

report_problemVariante danger

check_circleVariante success

<MeAlert info message="Variante info" />
<MeAlert warning message="Variante warning" />
<MeAlert danger message="Variante danger" />
<MeAlert success message="Variante success" />

Visibilidade

Use a prop show para controlar a visibilidade sem remover o elemento do DOM.

infoEste alerta está visível.

infoEste alerta está oculto.

<MeAlert message="Este alerta está visível." />
<MeAlert :show="false" message="Este alerta está oculto." />

Com Conteúdo Lateral

A prop hasContent habilita o slot content à direita e expande o alerta para largura total.

error_outlineSeu plano expira em 3 dias.

<MeAlert
  variant="warning"
  message="Seu plano expira em 3 dias."
  hasContent
>
  <template #content>
    <MeButton size="small" label="Renovar" />
  </template>
</MeAlert>

Sem Ícone

Use noIcon para ocultar o ícone quando o contexto visual dispensa o símbolo.

Dica: revise os dados antes de continuar.

Operação concluída com sucesso.

<MeAlert noIcon message="Dica: revise os dados antes de continuar." />
<MeAlert success noIcon>Operação concluída com sucesso.</MeAlert>

Com Link

O texto dentro do alerta suporta links estilizados automaticamente.

info Leia os termos de uso antes de continuar.

<MeAlert>
  Leia os <a href="#">termos de uso</a> antes de continuar.
</MeAlert>

API

Props

Prop	Tipo	Padrão	Descrição
variant	'info' | 'warning' | 'danger' | 'success'	-	Variante de cor do alerta. Quando ausente, usa info.
message	string	-	Texto exibido no alerta. Quando definido, o slot default é ignorado.
show	boolean	true	Controla a visibilidade. Quando false, aplica display: none.
hasContent	boolean	false	Habilita o slot content lateral e expande o alerta para largura total.
info	boolean	false	Ativa variante informativa (azul). Atalho para variant="info".
warning	boolean	false	Ativa variante de aviso (laranja). Atalho para variant="warning".
danger	boolean	false	Ativa variante de perigo (vermelho). Atalho para variant="danger".
success	boolean	false	Ativa variante de sucesso (verde). Atalho para variant="success".
noIcon	boolean	false	Oculta o ícone do alerta.

Slots

Nome	Descrição
default	Conteúdo textual do alerta. Renderizado apenas quando message não está definida.
content	Conteúdo lateral (direita). Renderizado apenas quando hasContent=true.

Ícones por variante

Variante	Ícone
info	info
warning	error_outline
danger	report_problem
success	check_circle