Alert Modal

A specialized modal component designed for displaying alerts, confirmations, and notifications with customizable types, icons, and actions.

Basic Alert

Shows a simple alert with a title and confirm button.

Preview Code

Check dev tools console for the alert output

javascript
Options
The Alert Modal component supports various configuration options.
  • title: The alert's title text (required)
  • content: The alert's content (optional)
  • type: The alert type ('success', 'warning', 'danger', 'info')
  • confirmButtonText: Text for the confirm button (required)
  • cancelButtonText: Text for the cancel button (optional)
  • static: If true, prevents closing by clicking outside (optional)
  • icon: If true, shows the type-specific icon (optional)
Alert Examples
Here are examples of different ways to use the alert modal component.

Confirmation Alert

Shows an alert with both confirm and cancel buttons.

Preview Code

Check dev tools console for the alert output

javascript

Static Alert

Shows an alert that cannot be dismissed by clicking outside.

Preview Code

Check dev tools console for the alert output

javascript

API

The alert modal component provides a simple interface for displaying alerts and confirmations.
Alert Object Properties
The alert object passed to the boui.alert function can have the following properties:

Common alternative names: Alert Dialog, Confirmation Modal, Notification Modal, Message Box, Dialog Box

Types: Success Alert, Warning Alert, Danger Alert, Info Alert

Principles

Clarity

Alert modals provide clear, focused messages with appropriate visual cues to indicate their importance and type.

Action-Oriented

Each alert is designed to prompt user action, whether it's acknowledgment or a decision between options.

Consistency

Maintains consistent styling and behavior across different alert types while providing visual distinction between them.

Anatomy

Alert Modal Anatomy
  1. Modal container

    2. Container to display the alert

  2. Backdrop

    3. Background overlay

  3. Body

    4. Contains the alert content

  4. Header

    5. Contains the alert title

  5. Content

    6. Contains the alert message

  6. Footer buttons

    7. Contains the alert action buttons

  7. Close button

    8. Close the alert

Usage

Use alert modals for:

  • Confirming user actions
  • Displaying success messages
  • Showing warning messages
  • Presenting critical errors
  • Providing important information
  • Requesting user decisions