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 />
  </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