Toast

A brief notification message for user actions and system feedback, powered by Sonner (opens in a new tab). Supports success, info, warning, error types with custom icons themed to match the design system.

Installation

pnpm dlx shadcn@latest add sonner

Usage

import { Toaster, toast } from "@hoag/ui/components/sonner";
 
// Mount once at app root
export default function App() {
  return (
    <>
      <Toaster />
      {/* rest of app */}
    </>
  );
}
 
// Call from anywhere
toast.success("Saved successfully");

Types

toast.success("Saved successfully");
toast.info("Background sync started");
toast.warning("Please review required fields");
toast.error("Failed to save changes");

With Description

toast.success("Profile updated", {
  description: "Your changes have been saved.",
});

With Action

toast.error("Message deleted", {
  description: "This cannot be undone.",
  action: {
    label: "Undo",
    onClick: () => toast.success("Restored!"),
  },
});

Loading

const id = toast.loading("Uploading file...");
// later, resolve it
toast.success("Upload complete!", { id });

API Reference

`toast` methods

Method	Description
`toast(message)`	Default toast
`toast.success(message, options?)`	Success variant (green)
`toast.info(message, options?)`	Info variant (primary color)
`toast.warning(message, options?)`	Warning variant (orange)
`toast.error(message, options?)`	Error variant (destructive)
`toast.loading(message, options?)`	Loading spinner toast
`toast.dismiss(id?)`	Dismiss a specific or all toasts

Toast options

Option	Type	Description
`description`	`string`	Secondary text below the title
`action`	`{ label: string; onClick: () => void }`	Action button
`duration`	`number`	Duration in ms (`Infinity` for persistent)
`id`	`string \| number`	Update an existing toast by ID
`onDismiss`	`(toast) => void`	Callback when dismissed
`onAutoClose`	`(toast) => void`	Callback when auto-closed

`<Toaster>` props

Prop	Type	Default	Description
`position`	`string`	auto (desktop: `top-center`, mobile: `bottom-center`)	Toast position
`visibleToasts`	`number`	`3`	Max toasts visible at once
`expand`	`boolean`	`false`	Expand all toasts in stack

Tooltip Date Picker