Toast

Display temporary notification messages with customizable variants, positioning, and auto-dismiss functionality.

Basic Usage

Toast notifications are temporary messages that appear to provide feedback about an action or system status. They automatically dismiss after a set duration and can be positioned anywhere on the screen.

Setup Toast Provider

import { ToastProvider } from '@akitectio/aki-ui'

function App() {
  return (
    <ToastProvider position="top-right">
      {/* Your app content */}
    </ToastProvider>
  )
}

Using the useToast Hook

import { useToast, Button } from '@akitectio/aki-ui'

function MyComponent() {
  const toast = useToast()

  const showToast = () => {
    toast.show({
      title: 'Success!',
      message: 'Your action was completed successfully.',
      variant: 'success',
    })
  }

  return <Button onClick={showToast}>Show Toast</Button>
}

Variants

Toast notifications come in different variants to communicate different types of information.

Toast Variants

// Success Toast
toast.success('Operation completed successfully!')

// Error Toast
toast.error('An error occurred')

// Warning Toast
toast.warning('This is a warning message')

// Info Toast
toast.info('This is an informational message')

// Custom variant
toast.show({
  message: 'Custom message',
  variant: 'success',
  duration: 3000
})

API Reference

Toast Methods

  • toast.success(message, options?) - Show success toast
  • toast.error(message, options?) - Show error toast
  • toast.warning(message, options?) - Show warning toast
  • toast.info(message, options?) - Show info toast
  • toast.show(options) - Show custom toast
  • toast.dismiss(id) - Dismiss specific toast
  • toast.dismissAll() - Dismiss all toasts