@bezbeli/alert

A lightweight, customizable Alert component for Astro.

Installation

npm install @bezbeli/alert
# or
bun add @bezbeli/alert
# or
pnpm add @bezbeli/alert

Usage

Basic Usage

---
import { Alert } from "@bezbeli/alert";
---

<Alert message="This is an info alert" />
<Alert message="Success!" type="success" />
<Alert message="Warning message" type="warning" />
<Alert message="Error occurred" type="error" />

With Slot Content

You can use slot content for more complex alert messages:

---
import { Alert } from "@bezbeli/alert";
---

<Alert type="info">
  <strong>Note:</strong> This alert contains <a href="#">a link</a> and other HTML.
</Alert>

Non-dismissible Alert

---
import { Alert } from "@bezbeli/alert";
---

<Alert message="This alert cannot be closed" dismissible={false} />

Auto-expiring Alert

Alerts can automatically dismiss themselves after a calculated duration based on message length:

---
import { Alert } from "@bezbeli/alert";
---

<Alert message="This alert will disappear automatically!" autoExpire />

The duration is calculated as ~50ms per character, with a minimum of 3 seconds and maximum of 10 seconds.

Fixed Position Alerts

Display alerts fixed to the bottom corners of the viewport:

---
import { Alert } from "@bezbeli/alert";
---

<Alert message="Bottom left notification" position="bottom-left" />
<Alert message="Bottom right notification" position="bottom-right" />

Props

| Prop | Type | Default | Description | | ------------- | --------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------- | | message | string | - | The message to display in the alert | | type | "info" \| "success" \| "warning" \| "error" | "info" | The type of alert (determines color scheme) | | dismissible | boolean | true | Whether the alert can be dismissed with a close button | | autoExpire | boolean | false | Whether the alert auto-dismisses (duration based on message length: ~50ms/char, 3s-10s range) | | position | "inline" \| "bottom-left" \| "bottom-right" | "inline" | Position of the alert (inline or fixed to bottom corners) |

Customization

The component uses CSS custom properties for easy theming. Override these variables to customize the appearance:

.alert {
  /* Layout */
  --alert-padding: 0.75rem 1rem;
  --alert-border-radius: 0.375rem;
  --alert-gap: 0.75rem;

  /* Info colors */
  --alert-info-bg: #dbeafe;
  --alert-info-border: #3b82f6;
  --alert-info-text: #1e40af;

  /* Success colors */
  --alert-success-bg: #dcfce7;
  --alert-success-border: #22c55e;
  --alert-success-text: #166534;

  /* Warning colors */
  --alert-warning-bg: #fef3c7;
  --alert-warning-border: #f59e0b;
  --alert-warning-text: #92400e;

  /* Error colors */
  --alert-error-bg: #fee2e2;
  --alert-error-border: #ef4444;
  --alert-error-text: #991b1b;
}

Direct Component Import

You can also import the component directly:

---
import Alert from "@bezbeli/alert/Alert.astro";
---

<Alert message="Hello!" type="success" />

License

MIT