Toast - Keep React

Toasts typically appear as small, non-intrusive pop-up notifications that appear near the edge of the screen and disappear automatically after a short period of time or when dismissed by the user.

Table of Contents#

Setup Toast#

Setup the Toast component to display the toast message. First import the ToastWrapper component in our root directory and then use the <ToastWrapper> component. Now copy paste the default toast variant from the documentation.

github
import { ToastWrapper } from 'keep-react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
      <ToastWrapper
        toastOptions={{
          classNames: {
            toast: 'dark:bg-metal-900 border dark:border-metal-800 border-white bg-white',
            title: 'text-metal-900 dark:text-white',
            description: 'dark:text-metal-300 text-metal-600',
            actionButton: 'dark:bg-metal-800 bg-metal-900 text-white',
            cancelButton: 'dark:bg-metal-800 bg-metal-900 text-white',
            closeButton: 'dark:bg-metal-800 bg-metal-900 text-white',
            error: 'text-error-500',
            success: 'text-success-500',
            warning: 'text-warning-500',
            info: 'text-primary-500',
          },
        }}
      />
  </React.StrictMode>,
)

Default Toast#

The default toast shows a short message to the user.

Toast With Description#

Toast with title and description for providing additional details to the user.

Toast With Action#

You can include an action button in the toast component, allowing users to dismiss the toast by clicking on it.

Toast With Color Variant#

You can use different color variants such as success, error, or info.

Toast With Promise#

You can pass a promise to the toast component.

Reference#

To learn more about the Toast component, please see the documentation of Sonner