Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Toaster

Toaster

PreviousNext

A toast notification system for displaying temporary messages to users.

Sonner provides elegant, animated toast notifications that appear at the edge of the screen to communicate status updates, success messages, errors, or other brief information. Toasts automatically dismiss after a few seconds and can be stacked when multiple notifications appear simultaneously.

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>
  )
}

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={() => {
          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>
  )
}

Styling

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

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

TextareaToggle Group

On This Page

ExampleInstallationPropsExampleStylingAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page