Components / Feedback

Toast

அறிவிப்பு

Toasts are transient notification messages that appear briefly then dismiss automatically. Use Sonner (already wired up via the Toaster component) to trigger them.

அறிவிப்புகள் சுருக்கமாக தோன்றி தானாக மறையும் தற்காலிக அறிவிப்பு செய்திகள்.

Toast variants

Component preview

Notification toastsஅறிவிப்பு செய்திகள்

Setup

The Toaster is already mounted in src/app/layout.tsx. Import and call toast from sonner anywhere in your components.

// In your layout.tsx (already done)
import { Toaster } from "@/components/ui/sonner";
<Toaster position="bottom-right" richColors />

// In any component
import { toast } from "sonner";
toast.success("வெற்றி!");

Structure

Anatomy

5 parts documented for implementation and review.

Component map

Container

கொள்கலன்required<li>

Slide-in notification card at viewport edge (bottom-right default). Auto-dismisses after configurable duration (default 4-5s). Uses role=status and aria-live=polite. Supports swipe-to-dismiss on touch.

Icon

சின்னம்svg

Leading status icon colored by variant — CheckCircle for success, XCircle for error, AlertCircle for warning. Sized h-4 w-4. Provides immediate visual status recognition.

Title

தலைப்புrequired<div>

Primary message text — keep under 60 characters for scannability. Font-medium foreground color. For Tamil: concise status like பதிவு வெற்றி! (Registration success).

Description

விளக்கம்

Supporting description below the title. Text-sm muted-foreground. Provides additional context when the title alone is insufficient. Max 2 lines.

Action

செயல்<button>

Inline action button — Undo, View, Retry. Ghost or outline variant, text-sm. For Tamil: செயல்தவிர் (Undo), பார் (View). Should not be the primary call to action.

When to use Toast vs Alert

Toast — transient, auto-dismisses, for success/low-urgency feedback after an action.
Alert — persistent, inline, for error states that block the user from proceeding.
Never use toast for destructive or irreversible actions — the user may not see it in time.

API

Props

2 props

messagereq

Type: string
Default: -
Description: Bilingual string notified immediately to screen readers.

type

Type: "success" | "error" | "info"
Default: "success"
Description: Semantic tone.

Prop	Type	Default	Description
`message`req	`string`	-	Bilingual string notified immediately to screen readers.
`type`	`"success" \| "error" \| "info"`	`"success"`	Semantic tone.

Best practices

Use Toast for transient confirmations

தற்காலிக உறுதிப்படுத்தல்களுக்கு Toast பயன்படுத்தவும்

Toasts are ideal for confirming background actions like saving a form — they appear briefly and don't block the user.

படிவம் சேமிக்கப்பட்டது போன்ற பின்னணி செயல்களை உறுதிப்படுத்த Toast சிறந்தது.

Don't use Toast for errors requiring action

பயனர் செயல் தேவைப்படும் பிழைகளுக்கு Toast பயன்படுத்தாதே

If an error requires the user to take action, use Alert — a toast may auto-dismiss before they notice it.

பயனர் செயல் தேவைப்படும் பிழைகளுக்கு Alert பயன்படுத்தவும் — Toast தானாக மறைந்துவிடும்.

Limit to 1–2 toasts visible at a time

ஒரே நேரத்தில் 1–2 அறிவிப்புகளை மட்டுமே காட்டவும்

Showing too many toasts at once overwhelms users — queue them and show one or two at most.

ஒரே நேரத்தில் பல அறிவிப்புகள் காட்டுவது பயனரை குழப்பும் — ஒன்று அல்லது இரண்டு மட்டும் காட்டவும்.

Don't show a toast for every minor interaction

சிறிய ஒவ்வொரு செயலுக்கும் Toast காட்டாதே

Toasts for every click or input event create noise and train users to ignore them — use inline feedback instead.

ஒவ்வொரு சிறிய செயலுக்கும் Toast காட்டுவது பயனர்கள் அவற்றை புறக்கணிக்க பழக்கப்படுத்தும்.

Command Palette