How do I make React toast notifications accessible?

Use aria-live="polite" on the toast container so screen readers announce new toasts. Ninna UI's Toast component handles this automatically. For error toasts, consider aria-live="assertive" to interrupt the screen reader immediately.

Should I use Alert or Toast for notifications?

Use Alert for inline messages that persist on the page (form validation, page-level errors). Use Toast for temporary notifications that appear and auto-dismiss (save confirmation, undo actions). Both are in @ninna-ui/feedback.

Use Case

Build a Notification System with React and Tailwind CSS v4

Build an accessible notification system with toast messages and inline alerts — using Ninna UI's Alert and Toast components and Tailwind v4.

Notifications and accessibility

Notifications need to be announced to screen reader users. Use aria-live="polite" for non-urgent notifications (toasts) and aria-live="assertive" for urgent ones (errors). Ninna UI's Toast component handles this automatically.

1. Inline alerts with Alert

Use the Alert component from @ninna-ui/feedback for inline messages:

import { Alert } from "@ninna-ui/feedback";

<Alert variant="success" title="Saved!">
  Your changes have been saved successfully.
</Alert>

<Alert variant="danger" title="Error">
  Failed to save. Please try again.
</Alert>

2. Toast notifications

Use the Toast component from @ninna-ui/feedback for temporary notifications:

import { Toast } from "@ninna-ui/feedback";
import { Button } from "@ninna-ui/primitives";

<Toast>
  <Toast.Trigger asChild>
    <Button color="primary">Save</Button>
  </Toast.Trigger>
  <Toast.Content title="Saved!" description="Your changes have been saved." />
</Toast>

3. Toast with action button

Add an action button (like Undo) to the toast:

<Toast.Content title="Item deleted" description="The item was removed.">
  <Toast.Action altText="Undo" onClick={handleUndo}>
    Undo
  </Toast.Action>
</Toast.Content>

Component Docs

Alert Toast