Toast

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Toast, useToast } from '@/components/ui/toast';
5
6function ToastDemo() {
7  const { toast } = useToast();
8
9  return (
10    <Button
11      variant="outline"
12      onClick={() =>
13        toast({
14          title: 'Event created',
15          description: 'Your event has been created successfully.',
16        })
17      }
18    >
19      Show Toast
20    </Button>
21  );
22}
23
24export function Default() {
25  return (
26    <Toast.Provider>
27      <ToastDemo />
28    </Toast.Provider>
29  );
30}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Toast, useToast } from '@/components/ui/toast';
5
6function ToastDemo() {
7  const { toast } = useToast();
8
9  return (
10    <Button
11      variant="outline"
12      onClick={() =>
13        toast({
14          title: 'Event created',
15          description: 'Your event has been created successfully.',
16        })
17      }
18    >
19      Show Toast
20    </Button>
21  );
22}
23
24export function Default() {
25  return (
26    <Toast.Provider>
27      <ToastDemo />
28    </Toast.Provider>
29  );
30}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Toast, useToast } from '@/components/ui/toast';
5
6const variants = [
7  {
8    label: 'Default',
9    options: { title: 'Default notification', description: 'This is a default toast.' },
10  },
11  {
12    label: 'Success',
13    options: {
14      title: 'Success!',
15      description: 'Your changes have been saved.',
16      variant: 'success' as const,
17    },
18  },
19  {
20    label: 'Error',
21    options: {
22      title: 'Error',
23      description: 'Something went wrong. Please try again.',
24      variant: 'error' as const,
25    },
26  },
27  {
28    label: 'Info',
29    options: {
30      title: 'Info',
31      description: 'A new version is available.',
32      variant: 'info' as const,
33    },
34  },
35  {
36    label: 'Warning',
37    options: {
38      title: 'Warning',
39      description: 'Your session is about to expire.',
40      variant: 'warning' as const,
41    },
42  },
43];
44
45function VariantsDemo() {
46  const { toast } = useToast();
47
48  return (
49    <div className="flex flex-wrap gap-2">
50      {variants.map((variant) => (
51        <Button key={variant.label} variant="outline" onClick={() => toast(variant.options)}>
52          {variant.label}
53        </Button>
54      ))}
55    </div>
56  );
57}
58
59export function Variants() {
60  return (
61    <Toast.Provider>
62      <VariantsDemo />
63    </Toast.Provider>
64  );
65}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Toast, useToast } from '@/components/ui/toast';
5
6function WithActionDemo() {
7  const { toast } = useToast();
8
9  return (
10    <Button
11      variant="outline"
12      onClick={() =>
13        toast({
14          title: 'Message sent',
15          description: 'Your message has been sent successfully.',
16          action: {
17            label: 'Undo',
18            onClick: () => {
19              // undo action
20            },
21          },
22        })
23      }
24    >
25      Show Toast with Action
26    </Button>
27  );
28}
29
30export function WithAction() {
31  return (
32    <Toast.Provider>
33      <WithActionDemo />
34    </Toast.Provider>
35  );
36}

1'use client';
2
3import * as React from 'react';
4import { Button } from '@/components/ui/button';
5import { Toast, useToast, type ToastPosition } from '@/components/ui/toast';
6
7const positions: { label: string; value: ToastPosition }[] = [
8  { label: 'Top Left', value: 'top-left' },
9  { label: 'Top Right', value: 'top-right' },
10  { label: 'Bottom Left', value: 'bottom-left' },
11  { label: 'Bottom Right', value: 'bottom-right' },
12];
13
14function PositionsInner() {
15  const { toast } = useToast();
16
17  return (
18    <Button
19      variant="outline"
20      onClick={() =>
21        toast({
22          title: 'Notification',
23          description: 'Check the position of this toast.',
24        })
25      }
26    >
27      Show Toast
28    </Button>
29  );
30}
31
32export function Positions() {
33  const [position, setPosition] = React.useState<ToastPosition>('bottom-right');
34
35  return (
36    <Toast.Provider position={position}>
37      <div className="space-y-4">
38        <div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
39          {positions.map((pos) => (
40            <Button
41              key={pos.value}
42              variant={position === pos.value ? 'default' : 'outline'}
43              size="sm"
44              onClick={() => setPosition(pos.value)}
45            >
46              {pos.label}
47            </Button>
48          ))}
49        </div>
50        <PositionsInner />
51      </div>
52    </Toast.Provider>
53  );
54}