Alert Component - Ontada Design System

A comprehensive alert component with full WCAG 2.2 accessibility support, using Ontada Design System tokens.

Alert Variants

Info Alert

Information

This is an informational alert using the primary color from the Ontada Design System. It provides helpful context or additional details to guide users.

Success Alert

Success

Your changes have been saved successfully. All data has been persisted to the database and is now available across all systems.

Warning Alert

Warning

Please review your settings before proceeding. Some configurations may need your attention to ensure proper system functionality.

Error Alert

Error

An error occurred while processing your request. Please check your input and try again. If the problem persists, contact support.

Dismissible Alerts

These alerts can be dismissed by clicking the close button or pressing the Escape key when focused.

Dismissible Information

This alert can be dismissed by clicking the X button or pressing Escape (when the alert has keyboard focus).

Session Expiring Soon

Your session will expire in 5 minutes. Please save your work to avoid losing any changes.

Action Required

Your account requires immediate attention. Please update your payment information to continue using the service.

Without Icons

Alerts can be displayed without icons for a cleaner, more minimal appearance.

Simple Information

This alert doesn't display an icon, providing a cleaner look when visual emphasis isn't needed.

Form submitted successfully without an icon or title.

Accessibility Features (WCAG 2.2)

Semantic HTML: Uses proper heading hierarchy and semantic elements

ARIA Roles: role="alert" for immediate user attention

Live Regions: aria-live="polite" (info/success) or "assertive" (warning/error)

Atomic Announcements: aria-atomic="true" ensures full alert is read

Keyboard Support: Dismissible alerts can be closed with Escape key

Focus Management: Dismiss button is keyboard accessible with visible focus ring

Color Contrast: All text meets WCAG AA standards (4.5:1 minimum)

Design Tokens: Uses Ontada Design System CSS custom properties

Typography: Nunito font family with design system font sizes and weights

Design System Tokens Used

Colors

--primary (Info)

--chart-4 (Success)

--accent (Warning)

--destructive-foreground (Error)

Typography

--font-family-nunito

--text-base (Title)

--text-sm (Description)

--font-weight-semibold (Title)

--font-weight-regular (Description)

Border Radius

--radius-button (Alert container)

--radius (Dismiss button)

Interactive States

--ring (Focus ring)

--border (Border color)

Usage Example (React)

<!-- Basic info alert -->
<Alert variant="info">
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    Your session will expire soon.
  </AlertDescription>
</Alert>

<!-- Dismissible warning alert -->
<Alert 
  variant="warning" 
  dismissible 
  onDismiss={() => console.log("Dismissed")}
>
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    Please review before continuing.
  </AlertDescription>
</Alert>

<!-- Success alert without icon -->
<Alert variant="success" hideIcon>
  <AlertDescription>
    Operation completed successfully.
  </AlertDescription>
</Alert>