Skip to main content

​
Overview

🔔
Settings saved
✕
✓
Payment successful
Receipt sent to your email.
✕
⚠
Storage almost full
Free up space to continue syncing.
✕
✕
Upload failed
The file size exceeds the 10 MB limit.
✕
Toast is a non-blocking notification triggered by user actions or system events. It auto-dismisses after a timeout (default 4s) and supports semantic variants. Multiple toasts stack when active.

​
Installation

npm install @araf-ds/core

​
Setup

Add <ToastProvider> and <Toaster> to your app root once: 
// main.tsx or _app.tsx
import { ToastProvider, Toaster } from "@araf-ds/core"

function App() {
  return (
    <ToastProvider>
      <YourApp />
      <Toaster position="bottom-right" />
    </ToastProvider>
  )
}

​
Usage

import { toast } from "@araf-ds/core"

function SaveButton() {
  return (
    <Button onClick={() => toast({ title: "Changes saved" })}>
      Save
    </Button>
  )
}

​
Variants

​
Default

🔔
Settings saved
✕
toast({ title: "Settings saved" });

​
With Description

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

​
Success

✓
Payment successful
Receipt sent to your email.
✕
toast({
  variant: "success",
  title: "Payment successful",
  description: "Receipt sent to your email.",
});

​
Warning

toast({
  variant: "warning",
  title: "Storage almost full",
  description: "Free up space to continue syncing.",
});

​
Error

toast({
  variant: "error",
  title: "Upload failed",
  description: "The file size exceeds the 10 MB limit.",
});

​
With Action

🔔
Message deleted
✕
toast({
  title: "Message deleted",
  action: (
    <ToastAction altText="Undo" onClick={handleUndo}>
      Undo
    </ToastAction>
  ),
});

​
API Reference

​
toast()

​
title
string
Primary notification message (required).
​
description
string
Supporting description shown below the title.
​
variant
string
default:"default"
Semantic color variant. Values: default · success · warning · error · info
​
duration
number
default:"4000"
Auto-dismiss delay in milliseconds.
​
action
ToastActionElement
Optional action element (e.g. an Undo button).

​
Toaster

​
position
string
default:"bottom-right"
Stack position on screen. Values: top-left · top-center · top-right · bottom-left · bottom-center · bottom-right

​
Accessibility

  • Toast uses role="status" (or role="alert" for error variant) so screen readers announce it
  • aria-live="polite" is used for non-critical toasts; aria-live="assertive" for errors
  • Auto-dismiss is paused when the user hovers or focuses the toast
  • Action buttons inside toasts are keyboard-navigable
  • Dismiss button has an aria-label="Close" for screen readers

​
Do’s & Don’ts

Do

  • Use Toast for transient feedback after user actions (save, delete, upload)
  • Keep the title short — one sentence or fewer
  • Include an action when the user may want to undo
  • Use variant="error" for failures that need immediate attention

Don't

  • Don’t use Toast for persistent alerts — use Alert component instead
  • Don’t stack more than 3 toasts simultaneously
  • Don’t use Toast for information that requires a user decision — use Modal
  • Don’t make the duration too short for toasts with descriptions (use ≥5s)