Toast

Temporary notification popups

FeedbackStable

Preview

Interactive preview of the Toast component with different variants.

Success
Your changes have been saved.
Error
Failed to save changes.
New update available
Version 2.0 is now available.
Warning
Your session will expire soon.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { useToast } from 'apex-design-system';

Basic Usage

tsx
const { toast } = useToast();

toast({
  title: "Success!",
  description: "Your changes have been saved.",
});

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source