Toast - Keep React

Table of Contents#

• Setup Toast
• Default Toast
• Toast With Description
• Toast With Action
• Toast With Color Variant
• Toast With Promise
• Reference

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.

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
        richColors={true}
        toastOptions={{
        classNames: {
          title: 'text-body-3 font-medium',
          toast: 'rounded-xl shadow-large',
          description: 'text-body-4 font-normal',
        },
      }}
    />
  </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