Toasts

Examples

Implemented with react-toast, please refer to their documentation on how to use it.

1import { toast } from 'react-toastify'
2
3const ToastExample = () => (
4  <div className="h-stack spaced">
5    <button className="btn" onClick={() => toast.info('Info toast')}>
6      Info toast
7    </button>
8    <button
9      className="btn"
10      onClick={() => toast.success('Success toast')}
11    >
12      Success toast
13    </button>
14    <button
15      className="btn"
16      onClick={() => toast.warning('Warning toast')}
17    >
18      Warning toast
19    </button>
20    <button className="btn" onClick={() => toast.error('Error toast')}>
21      Error toast
22    </button>
23  </div>
24)

Setup

In order to use toasts you need to set them up in your _app.tsx.

1import ToastContainer from '@components/toasts'
2import type { AppProps } from 'next/app'
3// Note that it's important that your global stylesheet is loaded last, otherwise the theme will be overridden
4import '../styles/globals.css'
5
6export default function App({ Component, pageProps }: AppProps) {
7  return (
8    <>
9      <Component {...pageProps} />
10      <ToastContainer />
11    </>
12  )
13}