> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Toast
> A brief, auto-dismissing notification that appears at the edge of the screen to confirm actions or display system messages.
## 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
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Setup
Add `` and `` to your app root once:
```tsx theme={null}
// main.tsx or _app.tsx
import { ToastProvider, Toaster } from "@araf-ds/core"
function App() {
return (
)
}
```
***
## Usage
```tsx theme={null}
import { toast } from "@araf-ds/core"
function SaveButton() {
return (
)
}
```
***
## Variants
### Default
๐
Settings saved
โ
```tsx theme={null}
toast({ title: "Settings saved" });
```
### With Description
```tsx theme={null}
toast({
title: "Profile updated",
description: "Your changes have been saved.",
});
```
### Success
โ
Payment successful
Receipt sent to your email.
โ
```tsx theme={null}
toast({
variant: "success",
title: "Payment successful",
description: "Receipt sent to your email.",
});
```
### Warning
```tsx theme={null}
toast({
variant: "warning",
title: "Storage almost full",
description: "Free up space to continue syncing.",
});
```
### Error
```tsx theme={null}
toast({
variant: "error",
title: "Upload failed",
description: "The file size exceeds the 10 MB limit.",
});
```
### With Action
๐
Message deleted
โ
```tsx theme={null}
toast({
title: "Message deleted",
action: (
Undo
),
});
```
***
## API Reference
### toast()
Primary notification message (required).
Supporting description shown below the title.
Semantic color variant. Values: `default` ยท `success` ยท `warning` ยท `error` ยท `info`
Auto-dismiss delay in milliseconds.
Optional action element (e.g. an Undo button).
### Toaster
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
* 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 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)