🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Toast

Notifications that appear temporarily to provide feedback to users

Information toast

This is additional information

Installation

The Toast component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Toast component into your React component.

import { Toast } from 'reacui';

Toast Variants

ReacUI toasts come in several variants to accommodate different types of notifications.

Information toast

Success toast

Warning toast

Danger toast

<Toast message="Information toast" variant="info" />
<Toast message="Success toast" variant="success" />
<Toast message="Warning toast" variant="warning" />
<Toast message="Danger toast" variant="danger" />

Toast Positions

Toasts can be positioned in different parts of the screen.

Top Right (Default)

Bottom Left

<Toast 
  message="Top Right (Default)" 
  position="top-right" 
/>

<Toast 
  message="Bottom Left" 
  position="bottom-left" 
/>

Custom Duration

You can customize how long a toast remains visible before auto-dismissing.

Short duration (2 seconds)

Persistent toast (never auto-dismiss)

<Toast 
  message="Short duration (2 seconds)" 
  duration={2000} 
/>

<Toast 
  message="Persistent toast (never auto-dismiss)" 
  duration={0} 
/>

With Actions

Toasts can include action buttons for additional functionality.

File uploaded successfully

<Toast 
  message="File uploaded successfully" 
  variant="info"
  action={
    <button 
      className="px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 mr-2"
      onClick={() => console.log('View file')}
    >
      View
    </button>
  }
/>

API Reference

The following props are available for the Toast component.

Prop	Type	Default	Description
message	string	-	Primary message to display in the toast
description	string	''	Additional description text
variant	string	'info'	Toast style variant: 'info', 'success', 'warning', or 'danger'
position	string	'top-right'	Position on the screen: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'
duration	number	5000	Time in milliseconds before auto-dismissing. Set to 0 to disable auto-dismiss.
dismissible	boolean	true	Whether the toast can be manually dismissed
icon	ReactNode	-	Custom icon to display. Set to null to hide icon completely.
action	ReactNode	null	Action button or content to display in the toast
className	string	''	Additional CSS classes to apply
onDismiss	function	-	Callback function invoked when the toast is dismissed