Toast

A concise non-modal notification that appears at the edge of the screen.

Overview

Toast is a notification component based on Sonner with COCSO UI styling applied. It provides an imperative toast() function callable from anywhere in the application, and a Toaster component that mounts the toast viewport.

Imperative API: call toast(), toast.success(), toast.error(), etc. from any event handler.
Place <Toaster /> once in your root layout to enable toast rendering.
Toasts stack and auto-dismiss after a configurable duration.
Supports success, error, info, and warning semantic variants.

Guidelines

Use Toast for transient, non-blocking feedback about completed actions — "Saved successfully", "Link copied", "Item deleted".
For errors that require user action or decisions, use Dialog instead.
Keep toast messages concise (under 100 characters) so they can be read at a glance.

Accessibility

Toasts render in an aria-live="polite" region, so screen readers announce them without interrupting the current task.
Semantic variants (success, error, etc.) provide both visual and announced context.
Users can dismiss toasts manually before auto-dismiss, supporting users who process information at different speeds.
Avoid using toasts for critical information that requires user action — the auto-dismiss timer may cause users to miss the message.

Import

import { Toaster, toast } from "@cocso-ui/react";

Usage

Import toast and Toaster from @cocso-ui/react. Add <Toaster /> to your root layout, then call toast() wherever you want to show a notification.

"use client";

import { Button, Toaster, toast } from "@cocso-ui/react";

export default function ToastDefault() {
  return (
    <div className="flex flex-wrap gap-3 p-4">
      <Button onClick={() => toast("This is a toast message")} variant="primary">
        Show Toast
      </Button>
      <Button onClick={() => toast.success("Operation successful!")} variant="success">
        Success
      </Button>
      <Button onClick={() => toast.error("Something went wrong.")} variant="error">
        Error
      </Button>
      <Toaster />
    </div>
  );
}

Variant

Use semantic variant methods to communicate the intent of a notification at a glance.

toast(message) — Default neutral notification.
toast.success(message) — Confirms a completed action.
toast.error(message) — Signals a failure or error.
toast.info(message) — Provides informational context.
toast.warning(message) — Warns about a potentially unwanted outcome.

API Reference

toast function

Prop	Type	Default	Description
`toast(message)`	`function`	-	Displays a default neutral toast notification with the given message string.
`toast.success(message)`	`function`	-	Displays a green success toast confirming a completed action.
`toast.error(message)`	`function`	-	Displays a red error toast signaling a failure. For errors requiring user action, consider Dialog instead.
`toast.info(message)`	`function`	-	Displays a blue informational toast providing context or status updates.
`toast.warning(message)`	`function`	-	Displays a yellow warning toast alerting about a potentially unwanted outcome.
`toast.dismiss(id?)`	`function`	-	Dismisses a specific toast by its ID, or dismisses all toasts when called without arguments.

Toaster

Prop	Type	Default	Description
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`	Screen corner where toasts stack. Choose based on your layout — avoid overlapping primary navigation or action buttons.
`duration`	`number`	`4000`	Auto-dismiss duration in milliseconds. Increase for longer messages; set to `Infinity` for persistent toasts.
`richColors`	`boolean`	`false`	When `true`, applies richer, more saturated background colors to semantic variants for stronger visual emphasis.
`expand`	`boolean`	`false`	When `true`, toasts are always shown in their expanded form. When `false`, toasts stack compactly and expand on hover.