Feedback

Alert

Display important messages, warnings, and notifications. Critical for healthcare applications where timely information can impact patient care. Follows VA.gov Design System and WCAG 2.1 best practices.

Alert Types

Use semantic types to convey the nature and urgency of the message. Error and warning types automatically use role='alert' with assertive announcements for screen readers.

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.

Prior Authorization Required

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

Insurance Updated

Patient's primary insurance has been updated to the new provider.

System Notice

Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM EST.

Allergy Alert

Patient has documented allergy to Penicillin. Consider alternative antibiotics.

Slim Variant

Use slim alerts for immediate feedback within forms, inline validation, and less prominent notifications. Ideal for save confirmations and form field messages.

Patient record saved successfully.

Failed to update appointment. Please try again.

Changes will not be saved until you submit the form.

Your session will expire in 5 minutes.

Bordered Variant

Use the bordered variant for a cleaner look with a colored left accent border. Provides clear visual hierarchy without overwhelming the interface.

Missing Required Information

Please complete all required fields before submitting the patient intake form.

Incomplete Documentation

Medical records from previous provider have not been received.

Appointment Reminder

Patient's next appointment is scheduled for March 15, 2026 at 2:30 PM.

Lab Results Pending

CBC and metabolic panel results expected within 24 hours.

Banner Variant

Full-width banners for system-wide announcements and critical messages that span the entire content area.

Without Title

For simpler, single-line messages, use alerts without titles. Best for brief confirmations and status updates.

Prescription sent to pharmacy.

Connection lost. Please check your internet connection.

New lab results are available for review.

Dismissible Alerts

Allow users to dismiss non-critical notifications. Critical alerts (errors, clinical warnings) should typically not be dismissible without acknowledgment.

New Feature Available

You can now schedule telehealth appointments directly from patient records. Try it out in the appointment scheduler.

Expandable Alerts

For longer content, use expandable alerts to keep the interface clean while providing full details on demand. Great for detailed explanations and multi-step guidance.

To verify patient insurance coverage, follow these steps:

Confirm patient demographic information is current
Enter the insurance member ID and group number
Select the appropriate plan type from the dropdown
Click "Verify Coverage" to check eligibility in real-time

The following procedures require prior authorization:

Advanced imaging (MRI, CT, PET scans)
Outpatient surgery
Specialty medications (biologics, specialty injectables)
Durable medical equipment over $500

Submit authorization requests at least 5 business days in advance.

With Actions

Include action buttons for alerts that require user response. Use primary buttons for main actions and ghost buttons for secondary options.

Incomplete Patient Record

Missing required information: emergency contact, insurance details, and primary care physician.

Failed to Submit Claim

The claim submission failed due to missing diagnosis codes. Please review and resubmit.

Clinical Alerts

Special alert type for clinical information that needs immediate attention. Use for patient safety alerts, drug interactions, and critical lab results.

Drug Interaction Warning

Potential interaction between Warfarin and new prescription (Aspirin 325mg). Increased bleeding risk. Review medication list before proceeding.

Critical Lab Result

Potassium level: 6.2 mEq/L (Critical High). Immediate physician review required. Normal range: 3.5-5.0 mEq/L.

Allergy Documentation

Penicillin: Anaphylaxis (severe)
Sulfa drugs: Rash (moderate)
Latex: Contact dermatitis (mild)

Heading Levels

Use appropriate heading levels for proper document structure and accessibility. Screen readers use headings for navigation.

This is an h2 heading

Use h2 for top-level alerts on a page.

This is an h3 heading

Use h3 for alerts within sections (default).

This is an h4 heading

Use h4 for alerts within subsections.

Props

Prop	Type	Default	Description
`type`	`'success' \| 'error' \| 'warning' \| 'info' \| 'neutral' \| 'clinical'`	'info'	Alert severity type - determines color and ARIA behavior
`variant`	`'standard' \| 'slim' \| 'banner' \| 'bordered'`	'standard'	Visual variant style
`title`	`string`	—	Optional heading text for the alert
`headingLevel`	`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p'`	'h3'	Semantic heading level for proper document structure
`dismissible`	`boolean`	false	Shows close button to dismiss the alert
`showIcon`	`boolean`	true	Shows the status icon
`expandable`	`boolean`	false	Makes the alert content collapsible
`defaultExpanded`	`boolean`	true	Initial expanded state for expandable alerts
`closeBtnAriaLabel`	`string`	—	Custom aria-label for dismiss button
`onclose`	`() => void`	—	Called when alert is dismissed

Healthcare Best Practices

Patient Safety First: Use type="clinical" for patient safety alerts like allergies, drug interactions, and critical lab values.
Clear Remediation: Error alerts should provide clear steps for resolution, not just state the problem.
Critical Alerts: Do not make critical patient safety alerts dismissible without acknowledgment or logging.
Semantic Headings: Use appropriate headingLevel props for proper document structure and screen reader navigation.
No Auto-Dismiss: Never auto-dismiss alerts based on timers—users with disabilities may not have time to read them (WCAG 2.2.3).
Audit Trail: Log clinical alerts to the patient's record for compliance and audit purposes.

Accessibility Notes

ARIA Roles: Error and warning types use role="alert" for assertive screen reader announcements. Info and success use role="status" for polite announcements.
Live Regions: Alerts are automatically announced by screen readers when they appear dynamically.
Focus Management: When dismissing alerts, ensure focus moves to a logical next element (e.g., next heading or main content).
Color Independence: Icons and text convey meaning—never rely on color alone to communicate status.