🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Toaster

A notification component that displays temporary messages to users.

Toaster (also called Toast or Snackbar) provides brief, non-intrusive notifications that appear temporarily on the screen to inform users about actions, events, or states. Toasts automatically dismiss after a timeout or can be manually closed. They're ideal for success confirmations, error messages, information updates, or any feedback that doesn't require immediate user action.

Built on top of Sonner library with smooth animations, stacking behavior for multiple toasts, customizable positioning, and accessibility support including proper ARIA attributes for screen reader announcements.

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={() =>
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })
        }
      >
        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>
  )
}

Installation


npm install @strongtie/design-system

import { Toaster } from "@strongtie/design-system/toaster"

Props

All components accept standard HTML attributes and React props.

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={() =>
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })
        }
      >
        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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

group
toast
toast-action
toast-cancel
toast-close
toast-description
toast-title
toaster

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Textarea Toggle Group

On This Page

Example Installation Props Example Styling Additional Classes Accessibility

Contribute

Toaster

A notification component that displays temporary messages to users.

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={() =>
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })
        }
      >
        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>
  )
}

Installation


npm install @strongtie/design-system

import { Toaster } from "@strongtie/design-system/toaster"

Props

All components accept standard HTML attributes and React props.

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={() =>
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })
        }
      >
        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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

group
toast
toast-action
toast-cancel
toast-close
toast-description
toast-title
toaster

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Textarea Toggle Group

On This Page

Example Installation Props Example Styling Additional Classes Accessibility

Contribute