Toast

1import { Toaster, toast, Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <>
6      <Toaster position="bottom-right" />
7      <Button onClick={() => toast("Settings saved", {
8        description: "Your workspace has been updated."
9      })}>
10        Show toast
11      </Button>
12    </>
13  )
14}

1import { Toaster, toast, Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <>
6      <Toaster position="bottom-right" />
7      <div className="flex flex-wrap gap-2">
8        <Button size="sm" onClick={() => toast.success("Saved")}>Success</Button>
9        <Button size="sm" onClick={() => toast.error("Failed")}>Error</Button>
10        <Button size="sm" onClick={() => toast.warning("Careful")}>Warning</Button>
11        <Button size="sm" onClick={() => toast.info("Info")}>Info</Button>
12        <Button size="sm" onClick={() => toast.loading("Uploading...")}>Loading</Button>
13      </div>
14    </>
15  )
16}

1import { Toaster, toast, Button } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <>
6      <Toaster position="bottom-right" />
7      <Button onClick={() => toast("File deleted", {
8        description: "The file has been moved to trash.",
9        action: { label: "Undo", onClick: () => toast.success("Restored") }
10      })}>
11        With action
12      </Button>
13    </>
14  )
15}

1import { Toaster, toast, Button } from "@glinui/ui"
2
3export function Demo() {
4  const fetchData = () => new Promise((resolve) => setTimeout(resolve, 2000))
5  return (
6    <>
7      <Toaster position="bottom-right" />
8      <Button onClick={() => toast.promise(fetchData(), {
9        loading: "Generating report...",
10        success: "Report is ready!",
11        error: "Failed to generate report"
12      })}>
13        Promise toast
14      </Button>
15    </>
16  )
17}