Toast

A toast component for displaying temporary notifications and messages to users

Basic Usage

import { Toast, Button } from 'uiplex'

function App() {
  return (
    <>
      <Button
        onClick={() => {
          Toast.success('Success toast');
        }}
      >
        Success toast
      </Button>
      <Button
        onClick={() => {
          Toast.error('Error toast');
        }}
      >
        Error toast
      </Button>
      <Button
        onClick={() => {
          Toast.warning('Warning toast');
        }}
      >
        Warning toast
      </Button>
      <Button
        onClick={() => {
          Toast.info('Info toast');
        }}
      >
        Info toast
      </Button>
    </>
  )
}

With Title and Description

Toast.success({
  title: 'Success!'
  description: 'Your changes have been saved.',
})

Toast.error({
  title: 'Error!'
  description: 'Something went wrong. Please try again.',
})

Duration

// Auto-close after 3 seconds
Toast.info('This will close in 3 seconds', {
  hideAfter: 3000
})

// Never auto-close (requires manual close)
Toast.warning('This requires manual dismissal', {
  hideAfter: 0
})

Positions

// Position can be set per toast
Toast.success('Success toast', { position: 'top-right' })
Toast.error('Error toast', { position: 'bottom-left' })
Toast.info('Info toast', { position: 'top-center' })

// Default position is 'top-center' if not specified
Toast.success('This appears at top-center by default')

// Available positions:
// 'top-left', 'top-right', 'top-center'
// 'bottom-left', 'bottom-right', 'bottom-center'

API Reference

Method	Parameters	Description
Toast.success()	message: string options?: ToastOptions	Show a success toast
Toast.error()	message: string options?: ToastOptions	Show an error toast
Toast.warning()	message: string options?: ToastOptions	Show a warning toast
Toast.info()	message: string options?: ToastOptions	Show an info toast
Toast.close()	id: string	Close a specific toast by ID
Toast.closeAll()	-	Close all toasts

ToastOptions

Option	Type	Default	Description
title	string	-	Toast title text (if provided, message becomes description)
description	string	-	Toast description text (only used if title is provided)
hideAfter	number	5000	Auto-close duration in milliseconds (0 = never auto-close)
duration	number	5000	Alias for hideAfter (auto-close duration in milliseconds)
isClosable	boolean	true	Whether to show close button
position	"top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center"	"top-center"	Position where the toast should appear