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)
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}