Skip to main content

Alert

Alert is a status notification banner for displaying contextual feedback messages.

Import​

import { Alert } from "@tosui/react";

Basic Usage​

<Alert>This is an informational message.</Alert>

Status Variants​

<VStack gap={4}>
  <Alert status="info">Info: This is an informational message.</Alert>
  <Alert status="success">Success: Your changes have been saved.</Alert>
  <Alert status="warning">Warning: Please review before continuing.</Alert>
  <Alert status="error">Error: Something went wrong.</Alert>
</VStack>

With Title​

<VStack gap={4}>
  <Alert status="success" title="Payment Successful">
    Your payment has been processed. Check your email for receipt.
  </Alert>
  <Alert status="error" title="Upload Failed">
    The file could not be uploaded. Please try again.
  </Alert>
</VStack>

Dismissible​

Pass onClose to show a close button.

<Alert
  status="info"
  title="New Feature Available"
  onClose={() => console.log("Dismissed")}
>
  Check out our new dashboard features.
</Alert>

Custom Icon​

import { BellIcon } from "your-icon-library";

<Alert status="info" icon={<BellIcon />}>
  You have new notifications.
</Alert>

Common Patterns​

Form Validation Error​

<Alert status="error" title="Form Errors">
  <ul>
    <li>Email is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</Alert>

Success Feedback​

function SaveButton() {
  const [saved, setSaved] = useState(false);

  return (
    <VStack gap={4}>
      {saved && (
        <Alert status="success" onClose={() => setSaved(false)}>
          Your changes have been saved successfully.
        </Alert>
      )}
      <Button onClick={() => setSaved(true)}>Save Changes</Button>
    </VStack>
  );
}

Props Reference​

PropTypeDefaultDescription
status"success" | "warning" | "error" | "info""info"Alert status (determines color and icon)
titleReactNode-Optional title above description
childrenReactNode-Alert description content
iconReactNodestatus-basedCustom icon (overrides default)
onClose() => void-Close callback (shows close button when provided)

Accessibility​

  • Uses role="alert" for screen reader announcements
  • Close button has aria-label="Dismiss"
  • Icon has aria-hidden="true"

TypeScript​

import { Alert, type AlertStatus, type AlertProps } from "@tosui/react";