Toast

Lightweight notifications (similar to shadcn/sonner). Mount a single <TxToastHost /> at the app root, then call toast() anywhere.

Basic Usage

Toast

Mount host once, then trigger toasts.

 Copy<template>
  <TxToastHost />
  <TxButton @click="toast({ title: 'Saved', description: 'Your changes have been saved.' })">
    Show toast
  </TxButton>
  <TxButton
    style="margin-left: 8px;"
    @click="toast({ title: 'Success', description: 'Done', variant: 'success' })"
  >
    Success
  </TxButton>
</template>

API

toast(options)

toast({
  id?: string
  title?: string
  description?: string
  variant?: 'default' | 'success' | 'warning' | 'danger'
  duration?: number // ms, 0 = no auto dismiss
})

Interaction Contract

• <TxToastHost /> renders a notification region with role="region" and aria-label="Notifications".
• Each toast includes a keyboard-focusable close button named Dismiss notification.
• duration > 0 auto-dismisses the toast; duration: 0 keeps it visible until dismissToast(id) or clearToasts() is called.
• Passing the same id replaces the existing toast, preventing duplicate stacked notifications for the same operation.

dismissToast / clearToasts

Import from @talex-touch/tuffex/utils:

import { dismissToast, clearToasts } from '@talex-touch/tuffex/utils'