Alert

Mensagens contextuais com tons semânticos. Três variantes: inline (em formulários e fluxos), banner (topo da página) e solid (modais destrutivos, outages).

Uso básico

<script setup lang="ts">
import { Alert } from '@halfbyte/maka'
</script>

<template>
  <Alert tone="info" title="Informação">
    Seu cadastro foi recebido e está em análise.
  </Alert>
</template>

Tons

<Alert tone="info"    title="Info">Uma mensagem informativa.</Alert>
<Alert tone="success" title="Sucesso">Operação realizada com sucesso.</Alert>
<Alert tone="warn"    title="Atenção">Verifique os dados antes de continuar.</Alert>
<Alert tone="error"   title="Erro">Não foi possível completar a ação.</Alert>
<Alert tone="neutral" title="Neutro">Uma nota adicional sem urgência.</Alert>

Tamanhos

Solid

Usado em modais de ação destrutiva ou banners de outage. Fundo cheio na cor do tom.

<Alert tone="error"   variant="solid" title="Sistema indisponível">
  Estamos trabalhando para restaurar o serviço.
</Alert>
<Alert tone="success" variant="solid" title="Publicado">
  Seu conteúdo já está disponível para todos os usuários.
</Alert>

Com ações

<Alert
  tone="error"
  title="Falha no envio"
  :actions="[
    { label: 'Tentar de novo', onClick: handleRetry },
    { label: 'Cancelar',       onClick: handleCancel, variant: 'ghost' }
  ]"
>
  Não foi possível enviar o formulário. Verifique sua conexão.
</Alert>

Sem ícone / sem fechar

<!-- Sem ícone -->
<Alert tone="info" :hide-icon="true">Mensagem simples sem ícone.</Alert>

<!-- Sem botão de fechar -->
<Alert tone="warn" title="Atenção" :dismissible="false">
  Esta mensagem não pode ser fechada.
</Alert>

Banner

<!-- Adicione ao topo do layout, abaixo da navbar -->
<Alert tone="warn" variant="banner" title="Manutenção programada">
  O sistema ficará indisponível no sábado das 02h às 06h.
</Alert>

Banner é um por página. Se houver vários alertas globais, agrupe em um "Notification Center" e mostre só o mais crítico.

Props

Prop	Tipo	Padrão
tone	"info" | "success" | "warn" | "error" | "neutral"	"info"
size	"sm" | "md" | "lg"	"md"
variant	"inline" | "banner" | "solid"	"inline"
title	string	—
hideIcon	boolean	false
actions	AlertAction[]	—
dismissible	boolean	true
role	"alert" | "status"	auto

role é derivado automaticamente: alert para warn/error, status para os demais.

Eventos

Evento	Payload	Descrição
@dismiss	—	Emitido ao fechar o alerta

Slots

Slot	Descrição
default	Corpo da mensagem
icon	Ícone customizado (mantém o quadrado sólido ao redor)

Tipo AlertAction

interface AlertAction {
  label:    string;
  onClick:  () => void;
  variant?: "primary" | "ghost";  // default: "primary" no primeiro, "ghost" nos demais
}

Toast

O useToast() usa o mesmo sistema de tons e ícones. Toasts auto-dispensam por padrão (5–8s conforme tom). Com actions, não auto-dispensam.

<script setup lang="ts">
import { useToast } from '@halfbyte/maka'

const toast = useToast()

function save() {
  toast.show({
    tone:        'success',
    title:       'Salvo',
    description: 'Suas alterações foram persistidas.',
  })
}

function deleteItem() {
  toast.show({
    tone:    'error',
    title:   'Excluído',
    actions: [{ label: 'Desfazer', onClick: undo }],
  })
}
</script>

Adicione <Toaster /> uma vez na raiz do app:

<script setup lang="ts">
import { Toaster } from '@halfbyte/maka'
</script>

<template>
  <RouterView />
  <Toaster placement="bottom-end" />
</template>

Durações automáticas por tom

Tom	Duração
info	5 s
success	5 s
warn	6 s
error	8 s
Com actions	Não auto-dispensa