Feedback

Toast

Beautiful, accessible toast notifications with glass morphism design. Essential for providing feedback in healthcare applications without interrupting workflow. Follows WCAG 2.1 guidelines with proper ARIA roles and timing.

Programmatic API

Use the toast store for programmatic notifications. Add ToastContainer once to your root layout.

With Title and Progress

Add titles for context and progress bars for visual countdown feedback. Progress bars help users understand remaining time.

Promise-Based Toast

Show loading state, then success or error based on promise result. Perfect for API calls.

Toast Types

Static examples of all toast types with their visual styling and appropriate use cases.

Eligibility Verified

Patient insurance coverage is active and covers the requested procedure.

Verification Failed

Unable to verify insurance. Please check member ID and try again.

Request ID: REQ-2026-ERR-001

Prior Authorization

This procedure requires prior authorization. Processing may take 2-3 business days.

Insurance Updated

Patient's primary insurance has been updated in the system.

Allergy Alert

Patient has documented allergy to Penicillin. Consider alternative antibiotics.

Your session will expire in 5 minutes.

With Progress Bar

Visual countdown indicator for auto-dismissing toasts. Helps users understand remaining time before dismissal.

Record Saved

Patient record has been saved successfully.

Session expiring soon. Save your work.

With Actions

For toasts that require user interaction, use the actions slot to add buttons.

Save Failed

Unable to save patient record. Check your connection and try again.

Incomplete Record

Missing required information: emergency contact and insurance details.

Non-Dismissible

For critical notifications that require acknowledgment, disable the dismiss button. Use sparingly.

Critical Alert

Patient has severe allergy to Penicillin. Verify medication before prescribing.

Drug Interaction Warning

Potential interaction between Warfarin and new prescription detected.

Toast Props

Prop	Type	Default	Description
`message` *	`string`	—	Toast message text
`type`	`'success' \| 'error' \| 'warning' \| 'info' \| 'neutral' \| 'clinical'`	'info'	Toast type/status - determines color and ARIA behavior
`title`	`string`	—	Optional title displayed above the message
`dismissible`	`boolean`	true	Shows close button to dismiss
`showProgress`	`boolean`	false	Shows countdown progress bar
`duration`	`number`	5000	Auto-dismiss duration in ms (0 = no auto-dismiss)
`requestId`	`string`	—	Request ID for error tracking (displayed for support)
`dismissAriaLabel`	`string`	—	Custom aria-label for dismiss button
`ondismiss`	`() => void`	—	Called when toast is dismissed

ToastContainer Props

Prop	Type	Default	Description
`position`	`'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center'`	'top-right'	Position of the toast container
`maxToasts`	`number`	5	Maximum number of toasts to display simultaneously

Toast Store API

Prop	Type	Default	Description
`toasts.success(message, options?)`	`function`	—	Show a success toast
`toasts.error(message, options?)`	`function`	—	Show an error toast
`toasts.warning(message, options?)`	`function`	—	Show a warning toast
`toasts.info(message, options?)`	`function`	—	Show an info toast
`toasts.clinical(message, options?)`	`function`	—	Show a clinical alert toast
`toasts.show(options)`	`function`	—	Show a toast with full options
`toasts.remove(id)`	`function`	—	Remove a toast by ID
`toasts.clear()`	`function`	—	Clear all toasts
`toasts.promise(promise, options)`	`function`	—	Show loading, then success/error based on promise result

Usage in Your App

1. Add ToastContainer to your root layout:

<script>
  import { ToastContainer } from '@synthaxai/ui';
</script>

<ToastContainer position="top-right" />
<slot />

2. Use the toast store anywhere:

<script>
  import { toasts } from '@synthaxai/ui';

  async function handleSave() {
    try {
      await savePatientRecord();
      toasts.success('Patient record saved');
    } catch (error) {
      toasts.error('Failed to save', { requestId: error.id });
    }
  }
</script>

Healthcare Best Practices

Timing: WCAG recommends 6+ seconds for toast display. Error toasts use 8 seconds by default.
Critical Alerts: Use type="clinical" for patient safety alerts. Consider non-dismissible for critical information.
Error Tracking: Include requestId for errors to help support teams troubleshoot issues.
Clear Messages: Always include actionable information. "Save failed" → "Save failed. Check connection and retry."
Audit Trail: Log important toasts (especially errors and clinical alerts) to the patient's record.
No Auto-Dismiss for Critical: Never auto-dismiss critical clinical alerts. Users must acknowledge them.

Accessibility Notes

Semantic HTML: Uses <output> element for proper screen reader announcements.
ARIA Roles: Error, warning, and clinical types use role="alert" for assertive announcements.
aria-atomic: Ensures screen readers announce the complete toast message, not just changes.
Reduced Motion: Animations are disabled when prefers-reduced-motion is set.
Keyboard: Dismiss buttons are fully keyboard accessible with visible focus indicators.