Alert

Alert is a component for displaying messages to the user with customizable styles, animations, and behavior.

Basic Usage

The openAlert function allows you to display alert messages dynamically with ease. Simply call openAlert with the desired options to customize the alert's type, position, size, and other properties.

import { openAlert } from "lib/alert/Alert"

openAlert({
    type: "success", // Type of the alert (e.g., success, error, info, etc.)
    title: "Success!", // Title of the alert
    subtitle: "Your operation was successful.", // Subtitle for additional details
    displayTime: 3000, // Duration in milliseconds
    position: "top-right", // Position on the screen
})

Types

The type property specifies the type of the alert. Available options are:

success (green, for successful operations)
warning (yellow, for warnings)
info (blue, for informational messages)
error (red, for errors)
neutral (default, for general notifications)

Positioning

Control where the alert appears on the screen using the position property. Available positions include: top, bottom, left, right, center, top-right, top-left, bottom-right and bottom-left

Duration

Specify how long the alert will be displayed using the displayTime property. The value should be in milliseconds.

openAlert({ 
    displayTime: 5000, 
    title: "Persistent Alert", 
    subtitle: "This alert will stay for 5 seconds."
})

If displayTime is not provided, the alert will remain visible until it is manually closed.

Close Button

Add a close button to the alert by setting the closeButton property to true. If displayTime is set to 0, the close button is enabled by default.

openAlert({
    type: 'error',
    closeButton: true,
    title: "Error",
    subtitle: "Operation failed",
})

Adding HTML Content

You can include HTML content in the subtitle property for more complex layouts.

openAlert({
  type: "neutral",
  title: "Alert with HTML",
  subtitle: `
    <div>
      <span style="color: blue;">This is a custom HTML content.</span>
      <img src="https://via.placeholder.com/150" alt="Sample Image" />
    </div>
  `,
})

Size

Control the alert's size using the size property. Available sizes include: xs, sm, md, lg, xl, 2xl (default), 3xl, 4xl, 5xl, 6xl, 7xl

openAlert({
  size: "lg",
  type: "error",
  title: "Large Alert",
  subtitle: "This is an alert with a larger size.",
  displayTime: 3000,
})

Disabling Animations

Disable animations by setting the notAnimate property to true.

openAlert({
  notAnimate: true,
  type: 'warning',
  title: "Warning",
  subtitle: "Unsaved changes detected"
})

Custom Styles

Customize the alert's appearance using the class property to apply custom CSS classes.

openAlert({
  type: "success",
  title: "Custom Alert",
  subtitle: "This alert has a custom border.",
  class: "custom-class",
})

Example with All Features

Here’s a comprehensive example using multiple features together:

openAlert({
  type: "info",
  position: "top-right",
  size: "md",
  displayTime: 5000,
  closeButton: true,
  notAnimate: true,
  title: "Comprehensive Alert",
  subtitle: `
    <div>
      <strong>Custom HTML Content:</strong>
      <p>This alert demonstrates multiple features.</p>
    </div>
  `,
  class: "border-2 border-blue-400 shadow-lg rounded-xl",
})