Toast

Toasts provide transient feedback about actions, events, and system status without interrupting the user workflow.

Quick Start

Use a Toast to communicate temporary feedback to users.

1import { toast } from "@ecos/ui";
2
3toast({
4  variant="success"
5  title: "Successfully toasted!",
6});

Default Toast

Display a simple informational message.

1toast({
2  title: "Blank Toast",
3});

Loading Toast

Use loading to indicate that a process is currently in progress.

1toast({
2  title: "Loading...",
3  variant: "loading",
4  duration: Infinity,
5});

Success Toast

Use success to communicate completed actions.

1toast({
2  title: "Successfully toasted!",
3  variant: "success",
4});

Error Toast

Use error to communicate failures or unexpected issues.

1toast({
2  title: "This didn't work.",
3  variant: "error",
4});

With Description

Provide additional supporting information below the title.

1toast({
2  title: "Upload completed",
3  description: "3 files were uploaded successfully.",
4  variant: "success",
5});

Custom Toast

Custom toasts can include richer content such as avatars and messages.

1toast({
2variant: "custom",
3title: "John Doe",
4description: "Sure! 8:30pm works great",
5customIcon: (
6  <Avatar>
7    <AvatarImage src="/avatar.jpg" />
8    <AvatarFallback>JD</AvatarFallback>
9  </Avatar>
10),
11});

Custom Duration

Control how long a toast remains visible.

1toast({
2  title: "Changes saved",
3  duration: 10000,
4});

Toaster Setup

Mount a single Toaster component once at the root of your application.

1import { Toaster } from "@ecos/ui";
2
3export default function RootLayout({
4  children,
5}) {
6  return (
7    <>
8      {children}
9      <Toaster />
10    </>
11  );
12}

API Reference

toast()

Property	Type	Default	Description
title	string	-	Primary content displayed within the toast.
description	string	-	Additional descriptive content displayed beneath the title.
variant	"default" \| "loading" \| "success" \| "error" \| "custom"	"default"	Determines the visual appearance of the toast.
duration	number	4000	Duration in milliseconds before the toast is automatically dismissed.
avatar	ReactNode	-	Custom content displayed before the title, typically used by custom toasts.

Toaster

Property	Type	Default	Description
closeLabel	string	"Close"	Accessible label applied to the close button.

Visual Reference

Configuration	Preview
Default
Loading
Success
Error
Custom