Toast
A lightweight notification component for temporary feedback messages. Supports four severity types, auto-dismiss with progress indicators, and flexible positioning. Available as a standalone component or via a context-based provider pattern.
Live Preview
Interactive toast examples. Dismiss them and reset to see them again.
New update available
Changes saved successfully
Storage almost full
Failed to upload file
Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Toast component and related utilities.
import { Toast, ToastProvider, useToast } from '@/components/aidash/toast';Types
Four toast types for different severity levels, each with its own icon and border color.
Info — General information or tips
Success — Action completed successfully
Warning — Attention needed
Error — Something went wrong
<Toast type="info" title="Info — General information" onDismiss={...} />
<Toast type="success" title="Success — Action completed" onDismiss={...} />
<Toast type="warning" title="Warning — Attention needed" onDismiss={...} />
<Toast type="error" title="Error — Something went wrong" onDismiss={...} />With Description
Add a secondary description below the title for additional context.
Deployment complete
Your application has been deployed to production. All health checks passed.
1<Toast2type="success"3title="Deployment complete"4description="Your application has been deployed to production. All health checks passed."5onDismiss={() => setVisible(false)}6/>Provider Pattern
Wrap your app with ToastProvider and use the useToast hook to trigger toasts from anywhere.
// In your layout or app root
import { ToastProvider } from '@/components/aidash/toast';
export default function Layout({ children }) {
return (
<ToastProvider position="top-right" maxToasts={5}>
{children}
</ToastProvider>
);
}import { useToast } from '@/components/aidash/toast';
function MyComponent() {
const { addToast, removeToast } = useToast();
const handleSave = async () => {
try {
await saveData();
addToast({
type: 'success',
title: 'Saved!',
description: 'Your changes have been saved.',
});
} catch (err) {
addToast({
type: 'error',
title: 'Save failed',
description: 'Please try again later.',
duration: 8000,
});
}
};
return <button onClick={handleSave}>Save</button>;
}addToast function returns the toast ID, which you can pass to removeToast for programmatic dismissal.Standalone Usage
Use the Toast component directly without a provider for simple, local notification needs.
import { useState } from 'react';
import { Toast } from '@/components/aidash/toast';
import { HugeiconsIcon } from '@hugeicons/react';
import { Alert01Icon, Tag01Icon, Layout01Icon } from '@hugeicons/core-free-icons';
function MyComponent() {
const [showToast, setShowToast] = useState(false);
return (
<>
<button onClick={() => setShowToast(true)}>Show Toast</button>
{showToast && (
<Toast
type="success"
title="File uploaded"
description="Your file has been uploaded successfully."
onDismiss={() => setShowToast(false)}
duration={5000}
/>
)}
</>
);
}Position Options
Four positioning options for the ToastProvider container.
1<ToastProvider position="top-right"> {/* Default */}2 {children}3</ToastProvider>4 5<ToastProvider position="top-center">6 {children}7</ToastProvider>8 9<ToastProvider position="bottom-right">10 {children}11</ToastProvider>12 13<ToastProvider position="bottom-center">14 {children}15</ToastProvider>Auto Dismiss
Toasts auto-dismiss after a duration with a progress bar. Set duration to 0 for persistent toasts.
Auto-dismiss (3 seconds)
Persistent (duration=0)
1{/* Auto-dismiss after 3 seconds with progress bar */}2<Toast3type="info"4title="Auto-dismiss toast"5duration={3000}6onDismiss={() => setVisible(false)}7/>8 9{/* Persistent — no progress bar, manual dismiss only */}10<Toast11type="warning"12title="Persistent toast"13duration={0}14onDismiss={() => setVisible(false)}15/>API Reference
Complete list of props for ToastProvider, Toast, and the useToast hook.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Child components that can access the toast context |
| position | 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center' | 'top-right' | Position of the toast container on screen |
| maxToasts | number | 5 | Maximum number of toasts visible at once |
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'info' | 'success' | 'warning' | 'error' | 'info' | Visual style and icon of the toast |
| title | string | — | Main toast message (required) |
| description | string | — | Optional secondary text below the title |
| action | ReactNode | — | Action slot rendered below the description (e.g. Undo button) |
| onDismiss | () => void | — | Callback when dismiss button is clicked |
| duration | number | 5000 | Auto-dismiss time in ms. Set to 0 for persistent toast |
| Prop | Type | Default | Description |
|---|---|---|---|
| addToast | (toast: Omit<ToastData, "id">) => string | — | Add a new toast, returns the toast ID |
| removeToast | (id: string) => void | — | Remove a toast by its ID |
Toast component renders inline where placed. For positioned, overlaying toasts, use the ToastProvider pattern which renders toasts in a fixed container.Accessibility
Built-in accessibility features for screen readers and assistive technologies.
Role Alert
Toast notifications use role="alert" to immediately announce the message to screen readers without requiring focus.
ARIA Live Region
The toast container uses aria-live="polite" so new toasts are announced by assistive technologies in a non-interruptive manner.
Dismiss Button
Each toast includes a dismiss button with aria-label="Dismiss" for keyboard and screen reader users.
Color Contrast
Toast types use distinct color-coded borders and icons with sufficient contrast. Text content uses design tokens that adapt to light and dark themes.
1{/* Toast renders with role="alert" for screen readers */}2<Toast3type="error"4title="Upload failed"5description="The file exceeds the 10MB size limit."6onDismiss={() => setVisible(false)}7/>8 9{/* Persistent toast for important messages */}10<Toast11type="warning"12title="Unsaved changes"13duration={0}14onDismiss={() => setVisible(false)}15/>Related
Other components that work well alongside Toast.