Skip to content

Toast

Succinct messages that provide temporary feedback on specific actions. Optimized for screen reader announcements.

Toasts are used to confirm actions like "Saved" or "Deleted". Because they disappear, they must be announced immediately via live regions.

Accessibility Features

  • Aria Live: Uses role="status" or role="alert" depending on urgency.
  • Persistence: Toasts stay visible long enough for users to read them (minimum 5 seconds Recommended).
  • Dismissible: Includes a close button that is keyboard accessible and has a clear aria-label.

Usage Example

import { useToast } from '@holmdigital/components'; function MyComponent() { const { toast } = useToast(); return ( <button onClick={() => toast({ title: "Success!", description: "Changes saved." })}> Save Changes </button> ); }