Toast

Toasts are transient messages for feedback after user actions.

Overview

Toasts provide brief, non-blocking feedback about an operation. They appear temporarily and dismiss automatically. The Rogo toast system is built on Sonner with custom styling to match our design system.

tsx

import { toast } from "@rogo-technologies/ui/toast"

// Trigger a toast anywhere in your app
toast("Document saved")

Setup

Add the Toaster component once at the root of your application. This renders the toast container.

tsx

import { Toaster } from "@rogo-technologies/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Types

Toasts come in different types for various feedback scenarios. Each type displays a distinct icon.

Type	Method	Icon	Use Case
Default	`toast()`	None	General messages
Success	`toast.success()`	Checkmark (green)	Successful operations
Error	`toast.error()`	Exclamation (red)	Failed operations
Warning	`toast.warning()`	Triangle (amber)	Caution messages
Info	`toast.info()`	Info circle (green)	Informational messages
Loading	`toast.loading()`	Spinner	In-progress operations

tsx

// Default toast
toast("Document saved")

// Success toast
toast.success("Changes saved successfully")

// Error toast
toast.error("Failed to save changes")

// Warning toast
toast.warning("Your session will expire soon")

// Info toast
toast.info("New version available")

// Loading toast
toast.loading("Uploading file...")

With Description

Add a description for additional context below the main message.

tsx

toast.success("File uploaded", {
  description: "document.pdf has been uploaded to your workspace.",
})

With Action

Add an action button for quick follow-up actions. The toast will close when the action is clicked.

tsx

toast("Message archived", {
  action: {
    label: "Undo",
    onClick: () => toast.success("Message restored"),
  },
})

You can also render custom JSX for the action:

tsx

toast("File deleted", {
  action: <Button size="xs" onClick={() => restoreFile()}>Undo</Button>,
})

Promise

Use toast.promise() for async operations. It automatically transitions through loading, success, and error states.

tsx

toast.promise(saveChanges(), {
  loading: "Saving changes...",
  success: "Changes saved successfully",
  error: "Failed to save changes",
})

You can also use dynamic messages based on the result:

tsx

toast.promise(fetchData(), {
  loading: "Loading data...",
  success: (data) => `Loaded ${data.count} items`,
  error: (err) => `Error: ${err.message}`,
})

Duration

Toasts auto-dismiss after 4 seconds by default. Customize with the duration option (in milliseconds).

tsx

// Stay for 10 seconds
toast.info("Important notice", {
  duration: 10000,
})

// Stay until dismissed manually
toast.warning("Action required", {
  duration: Infinity,
})

Dismissing Toasts

Toasts can be dismissed programmatically using the toast ID.

tsx

// Get the toast ID when creating
const toastId = toast.loading("Uploading...")

// Later, dismiss it
toast.dismiss(toastId)

// Or dismiss all toasts
toast.dismiss()

Updating Toasts

Update an existing toast by passing its ID.

tsx

const toastId = toast.loading("Uploading...")

// Update the same toast
toast.success("Upload complete!", { id: toastId })

Custom Position

Override the default position for individual toasts or globally via the Toaster component.

tsx

// Global position (in Toaster)
<Toaster position="bottom-right" />

// Available positions:
// "top-left" | "top-center" | "top-right"
// "bottom-left" | "bottom-center" | "bottom-right"

Props

toast() Options

Prop	Type	Default	Description
`description`	`ReactNode`	—	Secondary text below the title.
`duration`	`number`	`4000`	Auto-dismiss time in milliseconds.
`action`	`{ label: string, onClick: () => void }`	—	Primary action button.
`cancel`	`{ label: string, onClick: () => void }`	—	Secondary cancel button.
`id`	`string`	—	Custom ID for the toast.
`icon`	`ReactNode`	—	Custom icon to display.
`dismissible`	`boolean`	`true`	Whether the toast can be dismissed.
`onDismiss`	`() => void`	—	Callback when toast is dismissed.
`onAutoClose`	`() => void`	—	Callback when toast auto-closes.

Toaster Props

Prop	Type	Default	Description
`position`	`string`	`"top-center"`	Position of toast container.
`expand`	`boolean`	`false`	Expand toasts by default.
`visibleToasts`	`number`	`3`	Maximum visible toasts.
`closeButton`	`boolean`	`true`	Show close button on toasts.
`richColors`	`boolean`	`false`	Use colorful backgrounds for types.
`toastOptions`	`object`	—	Default options for all toasts.

Usage Guidelines

Do

Use toasts for transient, non-critical feedback
Keep messages brief and actionable
Use appropriate types (success, error, etc.) for context
Use toast.promise() for async operations to show progress
Provide an undo action for destructive operations when possible

Don't

Don't use toasts for critical information that requires acknowledgment—use a dialog instead
Don't show multiple toasts in rapid succession—batch or debounce them
Don't use toasts for persistent information—use banners or alerts
Don't make toast messages too long—keep them scannable
Don't rely solely on toasts for error handling—ensure errors are also logged

PreviousTabs

NextTooltip