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.

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

    <App />
    <ToastWrapper />

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.


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