Toast

1"use client";2
3// Adapted from HeroUI v3.2.6 toast-default (Apache-2.0).4import { Persons } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles, type ToastData } from "./_shared";8
9function InvitationQueue() {10  const manager = Toast.useToastManager<ToastData>();11  return (12    <>13      <div {...stylex.props(styles.frame)}>14        <Button15          size="sm"16          variant="secondary"17          onClick={() => {18            const id = manager.add({19              title: "You have been invited to join a team",20              description: "Bob sent you an invitation to join HeroUI team",21              type: "default",22              data: { indicator: <Persons />, actionStyle: "tertiary" },23              actionProps: { children: "Dismiss", onClick: () => manager.close(id) },24            });25          }}26        >27          Show toast28        </Button>29      </div>30      <Notifications />31    </>32  );33}34
35export function Default() {36  return (37    <Toast.Provider>38      <InvitationQueue />39    </Toast.Provider>40  );41}

1"use client";2
3// Adapted from HeroUI v3.2.6 variants, Apache-2.0.4import { HardDrive, Persons } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles, type ToastData } from "./_shared";8
9function Messages() {10  const manager = Toast.useToastManager<ToastData>();11  return (12    <>13      <div {...stylex.props(styles.frame)}>14        <div {...stylex.props(styles.buttons)}>15          <Button16            size="sm"17            variant="tertiary"18            onClick={() => {19              const id = manager.add({20                title: "You have been invited to join a team",21                description: "Bob sent you an invitation to join HeroUI team",22                type: "default",23                data: { indicator: <Persons />, actionStyle: "tertiary" },24                actionProps: { children: "Dismiss", onClick: () => manager.close(id) },25              });26            }}27          >28            Default toast29          </Button>30          <Button31            size="sm"32            variant="secondary"33            onClick={() => {34              const id = manager.add({35                title: "You have 2 credits left",36                description: "Get a paid plan for more credits",37                type: "accent",38                actionProps: { children: "Upgrade", onClick: () => manager.close(id) },39              });40            }}41          >42            Accent toast43          </Button>44          <Button45            xstyle={styles.successText}46            size="sm"47            variant="tertiary"48            onClick={() => {49              const id = manager.add({50                title: "You have upgraded your plan",51                description: "You can continue using HeroUI Chat",52                type: "success",53                data: { actionStyle: "success" },54                actionProps: { children: "Billing", onClick: () => manager.close(id) },55              });56            }}57          >58            Success toast59          </Button>60          <Button61            xstyle={styles.warningText}62            size="sm"63            variant="tertiary"64            onClick={() => {65              const id = manager.add({66                title: "You have no credits left",67                description: "Upgrade to a paid plan to continue",68                type: "warning",69                data: { actionStyle: "warning" },70                actionProps: { children: "Upgrade", onClick: () => manager.close(id) },71              });72            }}73          >74            Warning toast75          </Button>76          <Button77            size="sm"78            variant="danger-soft"79            onClick={() => {80              const id = manager.add({81                title: "Storage is full",82                description:83                  "Remove files to release space. Adding more text to demonstrate longer content display",84                type: "danger",85                data: { indicator: <HardDrive />, actionStyle: "danger" },86                actionProps: { children: "Remove", onClick: () => manager.close(id) },87              });88            }}89          >90            Danger toast91          </Button>92        </div>93      </div>94      <Notifications />95    </>96  );97}98
99export function Variants() {100  return (101    <Toast.Provider>102      <Messages />103    </Toast.Provider>104  );105}

1"use client";2
3// Adapted from HeroUI v3.2.6 placements, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Toast } from "@lenso/ui";6import { Notifications, styles } from "./_shared";7
8const placements = ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"] as const;9const placementQueues = {10  "top-start": Toast.createToastManager(),11  top: Toast.createToastManager(),12  "top-end": Toast.createToastManager(),13  "bottom-start": Toast.createToastManager(),14  bottom: Toast.createToastManager(),15  "bottom-end": Toast.createToastManager(),16};17
18export function Placements() {19  return (20    <div {...stylex.props(styles.placements)}>21      {placements.map((placement) => (22        <Toast.Provider key={placement} toastManager={placementQueues[placement]} limit={3}>23          <Notifications placement={placement} />24        </Toast.Provider>25      ))}26      <div {...stylex.props(styles.placementButtons)}>27        {placements.map((placement) => (28          <Button29            key={placement}30            size="sm"31            variant="secondary"32            onClick={() =>33              placementQueues[placement].add({34                description: "Event has been created",35                title: "Event created",36                type: "default",37              })38            }39          >40            {placement.replace("-", " ")}41          </Button>42        ))}43      </div>44    </div>45  );46}

1"use client";2
3// Adapted from HeroUI v3.2.6 expanded, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Toast } from "@lenso/ui";6import { Notifications, styles } from "./_shared";7
8const queue = Toast.createToastManager();9
10export function Expanded() {11  return (12    <div {...stylex.props(styles.frame)}>13      <Toast.Provider toastManager={queue}>14        <Notifications expanded aria-label="Expanded notifications" />15      </Toast.Provider>16      <Button17        size="sm"18        variant="secondary"19        onClick={() => {20          queue.add({ title: "Simple message", type: "default" });21          setTimeout(() => queue.add({ title: "Operation completed", type: "success" }), 400);22          setTimeout(() => queue.add({ title: "New update available", type: "accent" }), 800);23        }}24      >25        Show 3 toasts26      </Button>27    </div>28  );29}

1"use client";2
3// Adapted from HeroUI v3.2.6 simple, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Toast } from "@lenso/ui";6import { Notifications, styles } from "./_shared";7
8function Messages() {9  const manager = Toast.useToastManager();10  return (11    <>12      <div {...stylex.props(styles.frame)}>13        <div {...stylex.props(styles.buttons)}>14          <Button15            size="sm"16            variant="secondary"17            onClick={() => manager.add({ title: "Simple message", type: "default" })}18          >19            Default20          </Button>21          <Button22            size="sm"23            variant="secondary"24            onClick={() => manager.add({ title: "Operation completed", type: "success" })}25          >26            Success27          </Button>28          <Button29            size="sm"30            variant="secondary"31            onClick={() => manager.add({ title: "New update available", type: "accent" })}32          >33            Info34          </Button>35          <Button36            size="sm"37            variant="secondary"38            onClick={() => manager.add({ title: "Please check your settings", type: "warning" })}39          >40            Warning41          </Button>42          <Button43            size="sm"44            variant="secondary"45            onClick={() => manager.add({ title: "Something went wrong", type: "danger" })}46          >47            Error48          </Button>49        </div>50      </div>51      <Notifications />52    </>53  );54}55
56export function Simple() {57  return (58    <Toast.Provider>59      <Messages />60    </Toast.Provider>61  );62}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-indicator, Apache-2.0.4import { Star } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles, type ToastData } from "./_shared";8
9function Message() {10  const manager = Toast.useToastManager<ToastData>();11  return (12    <>13      <div {...stylex.props(styles.frame)}>14        <Button15          size="sm"16          variant="secondary"17          onClick={() =>18            manager.add({ title: "Custom icon indicator", data: { indicator: <Star /> } })19          }20        >21          Custom indicator22        </Button>23      </div>24      <Notifications />25    </>26  );27}28
29export function CustomIndicator() {30  return (31    <Toast.Provider>32      <Message />33    </Toast.Provider>34  );35}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-toast, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Toast } from "@lenso/ui";6import { styles } from "./_shared";7
8function CustomLayout() {9  const manager = Toast.useToastManager();10  return (11    <>12      <Toast.Portal>13        <Toast.Viewport placement="bottom">14          {manager.toasts.map((item) => (15            <Toast key={item.id} toast={item} xstyle={styles.customRoot}>16              <Toast.Content>17                <div {...stylex.props(styles.customRow)}>18                  <Toast.Indicator xstyle={styles.accent} />19                  <div {...stylex.props(styles.customText)}>20                    {item.title && <Toast.Title xstyle={styles.accent} />}21                    {item.description && <Toast.Description />}22                  </div>23                </div>24              </Toast.Content>25              <Toast.Close xstyle={styles.customClose} aria-label="Close notification">26                <CloseIcon {...stylex.props(styles.customCloseIcon)} />27              </Toast.Close>28            </Toast>29          ))}30        </Toast.Viewport>31      </Toast.Portal>32      <Button33        size="sm"34        variant="secondary"35        onClick={() =>36          manager.add({37            description: "This uses a custom render function",38            title: "Custom layout toast",39            type: "default",40          })41        }42      >43        Custom toast44      </Button>45    </>46  );47}48
49export function CustomToast() {50  return (51    <div {...stylex.props(styles.frame)}>52      <Toast.Provider>53        <CustomLayout />54      </Toast.Provider>55    </div>56  );57}

1"use client";2
3// Adapted from HeroUI v3.2.6 promise, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Toast } from "@lenso/ui";6import { Notifications, styles } from "./_shared";7
8const uploadFile = (): Promise<{ filename: string; size: number }> =>9  new Promise((resolve) => {10    setTimeout(() => resolve({ filename: "document.pdf", size: 1024 }), 2000);11  });12const createEvent = (): Promise<never> =>13  new Promise((_, reject) => {14    setTimeout(() => reject(new Error("Network error. Please try again.")), 2000);15  });16const saveData = (): Promise<{ count: number }> =>17  new Promise((resolve, reject) => {18    setTimeout(() => {19      if (Math.random() > 0.5) resolve({ count: 42 });20      else reject(new Error("Failed to save data"));21    }, 2000);22  });23const fetchUser = (): Promise<{ name: string; email: string }> =>24  new Promise((resolve) => {25    setTimeout(() => resolve({ email: "john@example.com", name: "John Doe" }), 2000);26  });27
28function Workflows() {29  const manager = Toast.useToastManager();30  return (31    <>32      <div {...stylex.props(styles.frame, styles.promise)}>33        <div {...stylex.props(styles.section)}>34          <div {...stylex.props(styles.center)}>35            <h3 {...stylex.props(styles.heading)}>Using toast.promise()</h3>36            <p {...stylex.props(styles.help)}>37              Automatically handles loading, success, and error states38            </p>39          </div>40          <div {...stylex.props(styles.buttons)}>41            <Button42              size="sm"43              variant="secondary"44              onClick={() => {45                void manager46                  .promise(uploadFile(), {47                    error: { title: "Failed to upload file" },48                    loading: { title: "Uploading file..." },49                    success: (data) => ({50                      title: `File ${data.filename} uploaded (${data.size}KB)`,51                    }),52                  })53                  .catch(() => {});54              }}55            >56              Upload file57            </Button>58            <Button59              size="sm"60              variant="secondary"61              onClick={() => {62                void manager63                  .promise(createEvent(), {64                    error: (error: Error) => ({ title: error.message }),65                    loading: { title: "Creating event..." },66                    success: { title: "Event created" },67                  })68                  .catch(() => {});69              }}70            >71              Create event (error)72            </Button>73            <Button74              size="sm"75              variant="secondary"76              onClick={() => {77                void manager78                  .promise(saveData(), {79                    error: (error: Error) => ({ title: error.message }),80                    loading: { title: "Saving changes..." },81                    success: (data) => ({ title: `Saved ${data.count} items` }),82                  })83                  .catch(() => {});84              }}85            >86              Save data (random)87            </Button>88            <Button89              size="sm"90              variant="secondary"91              onClick={() => {92                void manager93                  .promise(fetchUser(), {94                    error: { title: "Failed to fetch user" },95                    loading: { title: "Loading user..." },96                    success: (data) => ({ title: `Welcome back, ${data.name}!` }),97                  })98                  .catch(() => {});99              }}100            >101              Fetch user102            </Button>103          </div>104        </div>105        <div {...stylex.props(styles.section)}>106          <div {...stylex.props(styles.center)}>107            <h3 {...stylex.props(styles.heading)}>Manual Loading State</h3>108            <p {...stylex.props(styles.help)}>Manually control loading state with isLoading prop</p>109          </div>110          <div {...stylex.props(styles.buttons)}>111            <Button112              size="sm"113              variant="secondary"114              onClick={() => {115                const id = manager.add({116                  title: "Uploading file...",117                  description: "Please wait while we upload your file",118                  type: "loading",119                  timeout: 0,120                });121                setTimeout(122                  () =>123                    manager.update(id, {124                      title: "File uploaded",125                      description: "Your file has been uploaded successfully",126                      type: "success",127                      timeout: 5000,128                    }),129                  3000,130                );131              }}132            >133              Upload with loading134            </Button>135            <Button136              size="sm"137              variant="secondary"138              onClick={() => {139                const id = manager.add({140                  title: "Processing payment...",141                  type: "loading",142                  timeout: 0,143                });144                setTimeout(145                  () =>146                    manager.update(id, {147                      title: "Payment processed",148                      description: "Your payment has been processed successfully",149                      type: "success",150                      timeout: 5000,151                    }),152                  2500,153                );154              }}155            >156              Payment processing157            </Button>158            <Button159              size="sm"160              variant="secondary"161              onClick={() => {162                const id = manager.add({ title: "Saving changes...", type: "loading", timeout: 0 });163                setTimeout(164                  () =>165                    manager.update(id, {166                      title: "Failed to save",167                      description: "Please try again",168                      type: "danger",169                      timeout: 5000,170                    }),171                  2000,172                );173              }}174            >175              Loading to error176            </Button>177          </div>178        </div>179      </div>180      <Notifications />181    </>182  );183}184
185export function PromiseDemo() {186  return (187    <Toast.Provider>188      <Workflows />189    </Toast.Provider>190  );191}

1"use client";2
3// Adapted from HeroUI v3.2.6 callbacks, Apache-2.0.4import { useRef, useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles } from "./_shared";8
9function History() {10  const manager = Toast.useToastManager();11  const [closedHistory, setClosedHistory] = useState<12    Array<{ id: number; message: string; time: string }>13  >([]);14  const nextId = useRef(0);15  const addToHistory = (message: string) => {16    const time = new Date().toLocaleTimeString();17    const id = nextId.current++;18    setClosedHistory((previous) => [{ id, message, time }, ...previous].slice(0, 5));19  };20  return (21    <>22      <div {...stylex.props(styles.frame, styles.large)}>23        <div {...stylex.props(styles.buttons)}>24          <Button25            size="sm"26            variant="secondary"27            onClick={() =>28              manager.add({29                title: "File saved",30                onClose: () => addToHistory("File saved (closed after 3 seconds)"),31                timeout: 3000,32              })33            }34          >35            Custom timeout (3s)36          </Button>37          <Button38            size="sm"39            variant="secondary"40            onClick={() =>41              manager.add({42                title: "Changes saved",43                onClose: () => addToHistory("Changes saved (closed after 10 seconds)"),44                timeout: 10000,45              })46            }47          >48            Custom timeout (10s)49          </Button>50          <Button51            size="sm"52            variant="secondary"53            onClick={() =>54              manager.add({55                title: "Event created",56                type: "success",57                onClose: () => addToHistory("Event created (closed after default timeout)"),58              })59            }60          >61            With onClose callback62          </Button>63          <Button64            size="sm"65            variant="secondary"66            onClick={() =>67              manager.add({68                title: "Important notification",69                description: "This toast will stay until dismissed",70                onClose: () => addToHistory("Important notification (manually closed)"),71                timeout: 0,72              })73            }74          >75            Persistent toast76          </Button>77        </div>78        <div {...stylex.props(styles.history)}>79          <div {...stylex.props(styles.historyHeading)}>80            <h3 {...stylex.props(styles.heading)}>Closed History</h3>81            {closedHistory.length > 0 && (82              <Button83                xstyle={styles.clear}84                size="sm"85                variant="tertiary"86                onClick={() => setClosedHistory([])}87              >88                Clear89              </Button>90            )}91          </div>92          <div {...stylex.props(styles.historyPanel)}>93            {closedHistory.length === 0 ? (94              <p {...stylex.props(styles.empty)}>No toasts closed yet. Try closing one above!</p>95            ) : (96              closedHistory.map((item, index) => (97                <div98                  key={item.id}99                  {...stylex.props(styles.historyItem, styles.historyDelay(index * 50))}100                >101                  <div {...stylex.props(styles.historyText)}>102                    <span {...stylex.props(styles.medium)}>{item.message}</span>103                    <span {...stylex.props(styles.time)}>({item.time})</span>104                  </div>105                  <div {...stylex.props(styles.check)}>106                    <svg107                      {...stylex.props(styles.checkIcon)}108                      fill="none"109                      stroke="currentColor"110                      strokeWidth="2"111                      viewBox="0 0 24 24"112                      aria-hidden="true"113                    >114                      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />115                    </svg>116                  </div>117                </div>118              ))119            )}120          </div>121        </div>122      </div>123      <Notifications />124    </>125  );126}127
128export function Callbacks() {129  return (130    <Toast.Provider>131      <History />132    </Toast.Provider>133  );134}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-queue, Apache-2.0.4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Toast } from "@lenso/ui";7import { Notifications, styles } from "./_shared";8
9export function CustomQueue() {10  const [notificationQueue] = useState(() => Toast.createToastManager());11  const [errorQueue] = useState(() => Toast.createToastManager());12  const [successQueue] = useState(() => Toast.createToastManager());13  return (14    <div {...stylex.props(styles.queues)}>15      <Toast.Provider toastManager={notificationQueue} limit={2}>16        <Notifications placement="bottom" />17      </Toast.Provider>18      <div {...stylex.props(styles.queueButtons)}>19        <Button20          size="sm"21          variant="secondary"22          onClick={() =>23            notificationQueue.add({24              description: "You have a new message",25              title: "New notification",26              type: "default",27            })28          }29        >30          Add notification (max 2)31        </Button>32      </div>33      <Toast.Provider toastManager={errorQueue} limit={3}>34        <Notifications placement="bottom-start" />35      </Toast.Provider>36      <div {...stylex.props(styles.queueButtons)}>37        <Button38          size="sm"39          variant="danger-soft"40          onClick={() =>41            errorQueue.add({42              description: "Failed to save changes",43              title: "Error occurred",44              type: "danger",45            })46          }47        >48          Add error (max 3)49        </Button>50      </div>51      <Toast.Provider toastManager={successQueue} limit={1}>52        <Notifications placement="bottom-end" />53      </Toast.Provider>54      <div {...stylex.props(styles.queueButtons)}>55        <Button56          xstyle={styles.successText}57          size="sm"58          variant="secondary"59          onClick={() =>60            successQueue.add({61              description: `Operation ${Date.now()}`,62              title: "Success!",63              type: "success",64            })65          }66        >67          Add success (max 1)68        </Button>69      </div>70    </div>71  );72}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-styles, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Toast } from "@lenso/ui";6import { styles } from "./_shared";7
8function StyledNotifications() {9  const manager = Toast.useToastManager();10  return (11    <>12      <Toast.Portal>13        <Toast.Viewport placement="bottom">14          {manager.toasts.map((item) => (15            <Toast key={item.id} toast={item} xstyle={styles.styledRoot}>16              <Toast.Content>17                <div {...stylex.props(styles.styledRow)}>18                  <Toast.Indicator xstyle={styles.neutral} />19                  <div {...stylex.props(styles.styledText)}>20                    {item.title && <Toast.Title xstyle={styles.styledTitle} />}21                    {item.description && <Toast.Description xstyle={styles.styledDescription} />}22                  </div>23                </div>24              </Toast.Content>25            </Toast>26          ))}27        </Toast.Viewport>28      </Toast.Portal>29      <Button30        size="sm"31        variant="secondary"32        onClick={() =>33          manager.add({ description: "Draft synced", title: "Saved", type: "default" })34        }35      >36        Show toast37      </Button>38    </>39  );40}41
42export function CustomStyles() {43  return (44    <div {...stylex.props(styles.customFrame)}>45      <Toast.Provider>46        <StyledNotifications />47      </Toast.Provider>48    </div>49  );50}