Skip to content
Altitude Standalone Components

Alert

Alert Component

The Alert component provides a standardized way to display status messages to users with appropriate visual cues based on the message type.

Example

This is an informational message

Your changes have been saved successfully

There was an error processing your request

Usage

import Alert from "@altitude/ui/react/ui/alert";


export default function AlertExample() {
  return (
    <div>
      <Alert type="info" message="This is an informational message" />


      <Alert
        type="success"
        message="Your changes have been saved successfully"
      />


      <Alert
        type="error"
        message="There was an error processing your request"
      />
    </div>
  );
}

Props

PropTypeRequiredDescription
typestringYesThe alert type: “info”, “success”, or “error”
messagestringYesThe message to display in the alert

Alert Types

The Alert component supports three types, each with its own visual styling:

  • info: Used for general information messages that don’t require immediate action
  • success: Used to confirm successful actions or operations
  • error: Used to highlight errors or issues that may require user attention

Accessibility

The Alert component is built with accessibility in mind:

  • Uses appropriate contrast for each alert type
  • Includes semantic icons with aria-hidden="true" to prevent screen readers from announcing them
  • Uses aria-live="polite" for the message to ensure screen readers announce changes
  • Maintains readable text contrast regardless of alert type