Toast

Alpha

An accessible notification system with automatic screen reader announcements and multiple variants.

Import

import { ToastProvider, ToastViewport, useToastHelpers } from "@compa11y/react";

Usage

Example.tsx

import { ToastProvider, ToastViewport, useToastHelpers, Button } from "@compa11y/react";

function App() {
  return (
    <ToastProvider>
      <MyComponent />
      <ToastViewport />
    </ToastProvider>
  );
}

function MyComponent() {
  const toast = useToastHelpers();

  return (
    <Button onClick={() => toast.success("Changes saved!")}>
      Save
    </Button>
  );
}

Features

Automatic screen reader announcements via live regions
Success, error, warning, and info variants
Auto-dismiss with configurable duration
Proper ARIA role and status attributes
Context-based API with hooks

Props

Toast component props
Prop	Type	Default	Description
`ToastProvider`	`component`	-	Wraps your app to provide toast context
`ToastViewport`	`component`	-	Renders the toast container

Sub-components

useToastHelpers()

useToastHelpers() props
Prop	Type	Default	Description
`success(message)`	`function`	-	Show a success toast
`error(message)`	`function`	-	Show an error toast
`warning(message)`	`function`	-	Show a warning toast
`info(message)`	`function`	-	Show an info toast

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Toast
Key	Action
`Escape`	Dismisses the toast