Toast

Exibe notificações temporárias flutuantes.

Uso

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

const { toast } = useToast()
</script>

<template>
  <!-- Adicione o Toaster uma vez no layout raiz -->
  <Toaster />

  <button @click="toast.create({ title: 'Salvo!', description: 'Suas alterações foram salvas.' })">
    Mostrar toast
  </button>
</template>

Posicionamento

<Toaster placement="top-start" />
<Toaster placement="top-end" />
<Toaster placement="bottom-start" />
<Toaster placement="bottom-end" />

Props — Toaster

Prop	Tipo	Padrão
placement	"top-start" | "top-end" | "bottom-start" | "bottom-end"	"bottom-end"

API — useToast

const { toast } = useToast()

toast.create({ title: 'Título', description: 'Descrição' })
toast.dismiss(id)