Alert

Alerts display brief, important messages to attract user attention without interrupting their task.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Alert } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Alert variant="info" title="Information">
      This is an informational message.
    </Alert>
  );
}

Variants

<Alert variant="info" title="Information">Info message</Alert>
<Alert variant="success" title="Success">Success message</Alert>
<Alert variant="warning" title="Warning">Warning message</Alert>
<Alert variant="danger" title="Error">Error message</Alert>

When to use

• Alert — Use for persistent, inline feedback that is part of the page content (form errors, field validation, system warnings). It does not dismiss automatically and is always visible.
• Notification (Toast) — Use for ephemeral feedback triggered by a user action (saved successfully, item deleted). It appears as a floating toast and auto-dismisses. It does not block the user.