Toaster

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"

export function ToasterDefault() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => {
          const toastRef = toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })

          console.log(toastRef)
        }}
      >
        Show Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Event has been created successfully")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("There was an error creating the event")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Are you sure?", {
            description: "This action cannot be undone.",
            action: {
              label: "Confirm",
              onClick: () => toast.success("Action confirmed"),
            },
            cancel: {
              label: "Cancel",
              onClick: () => toast.info("Action cancelled"),
            },
          })
        }
      >
        With Actions
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const promise = new Promise((resolve) =>
            setTimeout(() => resolve({ name: "John Doe" }), 2000)
          )
          toast.promise(promise, {
            loading: "Loading...",
            success: (data: any) => `${data.name} has been added`,
            error: "Error",
          })
        }}
      >
        Promise
      </Button>
    </div>
  )
}

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"

export function ToasterDefault() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => {
          const toastRef = toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })

          console.log(toastRef)
        }}
      >
        Show Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Event has been created successfully")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("There was an error creating the event")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Are you sure?", {
            description: "This action cannot be undone.",
            action: {
              label: "Confirm",
              onClick: () => toast.success("Action confirmed"),
            },
            cancel: {
              label: "Cancel",
              onClick: () => toast.info("Action cancelled"),
            },
          })
        }
      >
        With Actions
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const promise = new Promise((resolve) =>
            setTimeout(() => resolve({ name: "John Doe" }), 2000)
          )
          toast.promise(promise, {
            loading: "Loading...",
            success: (data: any) => `${data.name} has been added`,
            error: "Error",
          })
        }}
      >
        Promise
      </Button>
    </div>
  )
}

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"

export function ToasterDefault() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => {
          const toastRef = toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })

          console.log(toastRef)
        }}
      >
        Show Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Event has been created successfully")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("There was an error creating the event")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Are you sure?", {
            description: "This action cannot be undone.",
            action: {
              label: "Confirm",
              onClick: () => toast.success("Action confirmed"),
            },
            cancel: {
              label: "Cancel",
              onClick: () => toast.info("Action cancelled"),
            },
          })
        }
      >
        With Actions
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const promise = new Promise((resolve) =>
            setTimeout(() => resolve({ name: "John Doe" }), 2000)
          )
          toast.promise(promise, {
            loading: "Loading...",
            success: (data: any) => `${data.name} has been added`,
            error: "Error",
          })
        }}
      >
        Promise
      </Button>
    </div>
  )
}

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"

export function ToasterDefault() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() => {
          const toastRef = toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })

          console.log(toastRef)
        }}
      >
        Show Toast
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Event has been created successfully")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("There was an error creating the event")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Are you sure?", {
            description: "This action cannot be undone.",
            action: {
              label: "Confirm",
              onClick: () => toast.success("Action confirmed"),
            },
            cancel: {
              label: "Cancel",
              onClick: () => toast.info("Action cancelled"),
            },
          })
        }
      >
        With Actions
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          const promise = new Promise((resolve) =>
            setTimeout(() => resolve({ name: "John Doe" }), 2000)
          )
          toast.promise(promise, {
            loading: "Loading...",
            success: (data: any) => `${data.name} has been added`,
            error: "Error",
          })
        }}
      >
        Promise
      </Button>
    </div>
  )
}

Toaster

Example

Installation

Props

Example

Styling

Accessibility

Toaster

Example

Installation

Props

Example

Styling

Accessibility