Alert

A flexible and accessible alert component for displaying contextual messages, notifications, or warnings. Supports multiple variants (info, success, warning, error), optional closable behavior, and clear accessibility cues.

import { Alert } from '@nofinite/nui';

Interactive Preview

Usage

Basic Alert

import { Alert } from '@nofinite/nui';

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

Alert with a title

<Alert title="Network Error">
  Unable to connect to the server. Please try again.
</Alert>

Variants

<Alert variant="success" title="Success">
  Your data has been saved successfully.
</Alert>

<Alert variant="warning" title="Warning">
  Your subscription will expire in 3 days.
</Alert>

<Alert variant="error" title="Error">
  Failed to process your request.
</Alert>

Closable Alert

<Alert
  variant="info"
  title="Reminder"
  closable
  onClose={() => console.log('Alert closed')}
>
  Don’t forget to check your inbox.
</Alert>

Variants

Colors can be overridden with design tokens for theming.

Accessibility

• Uses semantic roles:

  • role="alert" for error and warning (automatically announced by screen readers)
  • role="status" for info and success

• Headers are optional but recommended.

• Close button is keyboard accessible (Enter / Space triggers onClose).

• Focus styles visible via :focus-visible on the close button.

Behavior

• Alerts are controlled/uncontrolled: content always renders; visibility is handled via parent component logic.
• closable triggers onClose callback but does not remove alert automatically — parent should handle removal.
• Alerts are visually distinct per variant for immediate recognition.
• Close button shows hover and focus states for better UX.

Best Practices

Do

• Provide a title for clarity, especially for error or warning alerts.
• Keep messages concise.
• Use closable for temporary notifications.

Don’t

• Overload with too much text — keep alerts scannable.
• Use only color to convey status; combine with icons or text.
• Nest alerts inside other alerts — avoid confusion.

API Reference