Alert

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

Alerts are used to provide timely feedback to the user.

Examples

Vue

Lit

React

Live Preview

Alerts

Default alertSuccess alertInfo alertPrimary alertWarning alertError alertDanger alertMonochrome alert

Bordered

Default alertSuccess alertInfo alertPrimary alertWarning alertError alertDanger alertMonochrome alert

Bordered Left with Icon

Default alert

Success alert

Info alert

Primary alert

Warning alert

Error alert

Danger alert

Monochrome alert

Rounded

Default alertSuccess alertInfo alertPrimary alertWarning alertError alertDanger alertMonochrome alert

Dismissible

Alerts can be dismissed by the user with a close button.

Success! Your changes have been saved. Click the × to dismiss. Warning! This action may have unintended consequences.

CSS Parts Customization

Customize alert appearance using CSS Shadow Parts without breaking encapsulation.

This alert uses a vibrant gradient background with custom shadows Card-style alert with elevation and hover effect

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Alerts</h2>
    </div>
    <div class="stacked">
      <VueAlert class="mbe2">Default alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="success"
      >Success alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="info"
      >Info alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="primary"
      >Primary alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="warning"
      >Warning alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="error"
      >Error alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="danger"
      >Danger alert</VueAlert>
      <VueAlert
        class="mbe2"
        variant="monochrome"
      >Monochrome alert</VueAlert>
    </div>
    <div class="mbe4">
      <h2>Bordered</h2>
    </div>
    <div class="stacked">
      <VueAlert
        class="mbe2"
        bordered
      >Default alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="success"
      >Success alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="info"
      >Info alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="primary"
      >Primary alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="warning"
      >Warning alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="error"
      >Error alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="danger"
      >Danger alert</VueAlert>
      <VueAlert
        class="mbe2"
        bordered
        variant="monochrome"
      >Monochrome alert</VueAlert>
    </div>
    <div class="mbe4">
      <h2>Bordered Left with Icon</h2>
    </div>
    <div class="stacked">
      <VueAlert
        class="mbe2"
        borderedLeft
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-secondary)"
            :size="18"
            class="mie2"
          />
          Default alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="success"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-success)"
            :size="18"
            class="mie2"
          />Success alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="info"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-secondary)"
            :size="18"
            class="mie2"
          />Info alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="primary"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-primary)"
            :size="18"
            class="mie2"
          />Primary alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="warning"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-warning)"
            :size="18"
            class="mie2"
          />Warning alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="error"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-danger)"
            :size="18"
            class="mie2"
          />Error alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="danger"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-danger)"
            :size="18"
            class="mie2"
          />Danger alert
        </div>
      </VueAlert>
      <VueAlert
        class="mbe2"
        borderedLeft
        variant="monochrome"
      >
        <div class="flex-inline items-center justify-center">
          <Info
            color="var(--ag-monochrome)"
            :size="18"
            class="mie2"
          />Monochrome alert
        </div>
      </VueAlert>
    </div>
    <div class="mbe4">
      <h2>Rounded</h2>
    </div>
    <div class="stacked">
      <VueAlert
        class="mbe2"
        rounded
      >Default alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="success"
      >Success alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="info"
      >Info alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="primary"
      >Primary alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="warning"
      >Warning alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="error"
      >Error alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="danger"
      >Danger alert</VueAlert>
      <VueAlert
        class="mbe2"
        rounded
        variant="monochrome"
      >Monochrome alert</VueAlert>
    </div>
    <div class="mbe4">
      <h2>Dismissible</h2>
      <p
        class="mbe2"
        style="color: var(--ag-text-secondary); font-size: 0.875rem;"
      >
        Alerts can be dismissed by the user with a close button.
      </p>
    </div>
    <div class="stacked mbe4">
      <VueAlert
        v-if="showSuccessAlert"
        class="mbe2"
        variant="success"
        dismissible
        @alert-dismiss="showSuccessAlert = false"
      >
        <strong>Success!</strong> Your changes have been saved. Click the × to dismiss.
      </VueAlert>
      <button
        v-if="!showSuccessAlert"
        @click="showSuccessAlert = true"
        class="mbe2"
        style="padding: 0.5rem 1rem; cursor: pointer;"
      >
        Show Success Alert
      </button>

      <VueAlert
        v-if="showWarningAlert"
        class="mbe2"
        variant="warning"
        dismissible
        rounded
        @alert-dismiss="handleWarningDismiss"
      >
        <strong>Warning!</strong> This action may have unintended consequences.
      </VueAlert>
      <button
        v-if="!showWarningAlert"
        @click="showWarningAlert = true"
        style="padding: 0.5rem 1rem; cursor: pointer;"
      >
        Show Warning Alert
      </button>
    </div>
    <div class="mbe4">
      <h2>CSS Parts Customization</h2>
      <p
        class="mbe2"
        style="color: var(--ag-text-secondary); font-size: 0.875rem;"
      >
        Customize alert appearance using CSS Shadow Parts without breaking encapsulation.
      </p>
    </div>
    <div class="stacked mbe4">
      <VueAlert class="custom-gradient-alert mbe2">
        This alert uses a vibrant gradient background with custom shadows
      </VueAlert>
      <VueAlert class="custom-card-alert mbe2">
        Card-style alert with elevation and hover effect
      </VueAlert>
    </div>
  </section>
</template>
<script>
import { Info } from "lucide-vue-next";
import VueAlert from "agnosticui-core/alert/vue";
export default {
  name: "AlertExamples",
  components: { VueAlert, Info },
  data() {
    return {
      showSuccessAlert: true,
      showWarningAlert: true,
    };
  },
  methods: {
    handleWarningDismiss(event) {
      console.log("Warning dismissed, variant:", event.detail.variant);
      this.showWarningAlert = false;
    },
  },
};
</script>

<style scoped>
/* CSS Parts customization examples */

/* Gradient alert style */
.custom-gradient-alert::part(ag-alert) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
  font-weight: 600;
}

/* Card-style elevated alert */
.custom-card-alert::part(ag-alert) {
  background: white;
  color: #333;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card-alert::part(ag-alert):hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/alert';

export class AlertLitExamples extends LitElement {
  // Render in light DOM to access global utility classes
  createRenderRoot() {
    return this;
  }

  static properties = {
    showSuccessAlert: { type: Boolean },
    showWarningAlert: { type: Boolean },
  };

  constructor() {
    super();
    this.showSuccessAlert = true;
    this.showWarningAlert = true;
  }

  handleWarningDismiss(event) {
    console.log('Warning dismissed, variant:', event.detail.variant);
    this.showWarningAlert = false;
  }

  render() {
    return html`
      <section>
        <div class="mbe4">
          <h2>Alerts</h2>
        </div>
        <div class="stacked">
          <ag-alert class="mbe2">Default alert</ag-alert>
          <ag-alert class="mbe2" variant="success">Success alert</ag-alert>
          <ag-alert class="mbe2" variant="info">Info alert</ag-alert>
          <ag-alert class="mbe2" variant="primary">Primary alert</ag-alert>
          <ag-alert class="mbe2" variant="warning">Warning alert</ag-alert>
          <ag-alert class="mbe2" variant="error">Error alert</ag-alert>
          <ag-alert class="mbe2" variant="danger">Danger alert</ag-alert>
          <ag-alert class="mbe2" variant="monochrome">Monochrome alert</ag-alert>
        </div>

        <div class="mbe4">
          <h2>Bordered</h2>
        </div>
        <div class="stacked">
          <ag-alert class="mbe2" bordered>Default alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="success">Success alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="info">Info alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="primary">Primary alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="warning">Warning alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="error">Error alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="danger">Danger alert</ag-alert>
          <ag-alert class="mbe2" bordered variant="monochrome">Monochrome alert</ag-alert>
        </div>

        <div class="mbe4">
          <h2>Bordered Left with Icon</h2>
        </div>
        <div class="stacked">
          <ag-alert class="mbe2" borderedleft>
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-secondary)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Default alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="success">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-success)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Success alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="info">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-secondary)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Info alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="primary">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-primary)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Primary alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="warning">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-warning)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Warning alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="error">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-danger)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Error alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="danger">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-danger)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Danger alert
            </div>
          </ag-alert>
          <ag-alert class="mbe2" borderedleft variant="monochrome">
            <div class="flex-inline items-center justify-center">
              <svg
                class="mie2"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="var(--ag-monochrome)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 16v-4" />
                <path d="M12 8h.01" />
              </svg>
              Monochrome alert
            </div>
          </ag-alert>
        </div>

        <div class="mbe4">
          <h2>Rounded</h2>
        </div>
        <div class="stacked">
          <ag-alert class="mbe2" rounded>Default alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="success">Success alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="info">Info alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="primary">Primary alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="warning">Warning alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="error">Error alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="danger">Danger alert</ag-alert>
          <ag-alert class="mbe2" rounded variant="monochrome">Monochrome alert</ag-alert>
        </div>

        <div class="mbe4">
          <h2>Dismissible</h2>
          <p class="mbe2" style="color: var(--ag-text-secondary); font-size: 0.875rem;">
            Alerts can be dismissed by the user with a close button.
          </p>
        </div>
        <div class="stacked mbe4">
          ${this.showSuccessAlert
            ? html`
                <ag-alert
                  class="mbe2"
                  variant="success"
                  dismissible
                  @alert-dismiss=${() => (this.showSuccessAlert = false)}
                >
                  <strong>Success!</strong> Your changes have been saved. Click
                  the × to dismiss.
                </ag-alert>
              `
            : html`
                <button
                  @click=${() => (this.showSuccessAlert = true)}
                  class="mbe2"
                  style="padding: 0.5rem 1rem; cursor: pointer;"
                >
                  Show Success Alert
                </button>
              `}
          ${this.showWarningAlert
            ? html`
                <ag-alert
                  class="mbe2"
                  variant="warning"
                  dismissible
                  rounded
                  @alert-dismiss=${(e) => this.handleWarningDismiss(e)}
                >
                  <strong>Warning!</strong> This action may have unintended
                  consequences.
                </ag-alert>
              `
            : html`
                <button
                  @click=${() => (this.showWarningAlert = true)}
                  style="padding: 0.5rem 1rem; cursor: pointer;"
                >
                  Show Warning Alert
                </button>
              `}
        </div>

        <div class="mbe4">
          <h2>CSS Parts Customization</h2>
          <p class="mbe2" style="color: var(--ag-text-secondary); font-size: 0.875rem;">
            Customize alert appearance using CSS Shadow Parts without breaking
            encapsulation.
          </p>
        </div>
        <div class="stacked mbe4">
          <ag-alert class="custom-gradient-alert mbe2">
            This alert uses a vibrant gradient background with custom shadows
          </ag-alert>
          <ag-alert class="custom-card-alert mbe2">
            Card-style alert with elevation and hover effect
          </ag-alert>
        </div>

        <style>
          /* CSS Parts customization examples */

          /* Gradient alert style */
          .custom-gradient-alert::part(ag-alert) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 12px;
            border: none;
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
            font-weight: 600;
          }

          /* Card-style elevated alert */
          .custom-card-alert::part(ag-alert) {
            background: white;
            color: #333;
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
          }

          .custom-card-alert::part(ag-alert):hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
          }
        </style>
      </section>
    `;
  }
}

customElements.define('alert-lit-examples', AlertLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { useState } from "react";
import { ReactAlert } from "agnosticui-core/alert/react";

export default function AlertReactExamples() {
  const [showSuccessAlert, setShowSuccessAlert] = useState(true);
  const [showWarningAlert, setShowWarningAlert] = useState(true);

  const handleWarningDismiss = (event) => {
    console.log("Warning dismissed, variant:", event.detail.variant);
    setShowWarningAlert(false);
  };

  return (
    <section>
      <div className="mbe4">
        <h2>Alerts</h2>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2">Default alert</ReactAlert>
        <ReactAlert className="mbe2" variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="error">
          Error alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="monochrome">
          Monochrome alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h2>Bordered</h2>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" bordered>
          Default alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="error">
          Error alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="monochrome">
          Monochrome alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h2>Bordered Left with Icon</h2>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" borderedLeft>
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-secondary)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Default alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="success">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-success)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Success alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="info">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-secondary)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Info alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="primary">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-primary)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Primary alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="warning">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-warning)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Warning alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="error">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-danger)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Error alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="danger">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-danger)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Danger alert
          </div>
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="monochrome">
          <div className="flex-inline items-center justify-center">
            <svg
              className="mie2"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--ag-monochrome)"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
            Monochrome alert
          </div>
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h2>Rounded</h2>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" rounded>
          Default alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="error">
          Error alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="monochrome">
          Monochrome alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h2>Dismissible</h2>
        <p
          className="mbe2"
          style={{ color: "var(--ag-text-secondary)", fontSize: "0.875rem" }}
        >
          Alerts can be dismissed by the user with a close button.
        </p>
      </div>
      <div className="stacked mbe4">
        {showSuccessAlert && (
          <ReactAlert
            className="mbe2"
            variant="success"
            dismissible
            onAlertDismiss={() => setShowSuccessAlert(false)}
          >
            <strong>Success!</strong> Your changes have been saved. Click the ×
            to dismiss.
          </ReactAlert>
        )}
        {!showSuccessAlert && (
          <button
            onClick={() => setShowSuccessAlert(true)}
            className="mbe2"
            style={{ padding: "0.5rem 1rem", cursor: "pointer" }}
          >
            Show Success Alert
          </button>
        )}

        {showWarningAlert && (
          <ReactAlert
            className="mbe2"
            variant="warning"
            dismissible
            rounded
            onAlertDismiss={handleWarningDismiss}
          >
            <strong>Warning!</strong> This action may have unintended
            consequences.
          </ReactAlert>
        )}
        {!showWarningAlert && (
          <button
            onClick={() => setShowWarningAlert(true)}
            style={{ padding: "0.5rem 1rem", cursor: "pointer" }}
          >
            Show Warning Alert
          </button>
        )}
      </div>

      <div className="mbe4">
        <h2>CSS Parts Customization</h2>
        <p
          className="mbe2"
          style={{ color: "var(--ag-text-secondary)", fontSize: "0.875rem" }}
        >
          Customize alert appearance using CSS Shadow Parts without breaking
          encapsulation.
        </p>
      </div>
      <div className="stacked mbe4">
        <ReactAlert className="custom-gradient-alert mbe2">
          This alert uses a vibrant gradient background with custom shadows
        </ReactAlert>
        <ReactAlert className="custom-card-alert mbe2">
          Card-style alert with elevation and hover effect
        </ReactAlert>
      </div>

      {/* CSS Parts customization styles */}
      <style>{`
        /* Gradient alert style */
        .custom-gradient-alert::part(ag-alert) {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 1.5rem;
          border-radius: 12px;
          border: none;
          box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
          font-weight: 600;
        }

        /* Card-style elevated alert */
        .custom-card-alert::part(ag-alert) {
          background: white;
          color: #333;
          padding: 1.5rem;
          border-radius: 16px;
          border: 1px solid #e5e7eb;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .custom-card-alert::part(ag-alert):hover {
          transform: translateY(-2px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
      `}</style>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Alert

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

<template>
  <section>
    <div class="mbe4">
      <h3>Alerts</h3>
    </div>
    <div class="stacked">
      <VueAlert class="mbe2">Default alert</VueAlert>
      <VueAlert class="mbe2" variant="success">Success alert</VueAlert>
      <VueAlert class="mbe2" variant="info">Info alert</VueAlert>
      <VueAlert class="mbe2" variant="warning">Warning alert</VueAlert>
      <VueAlert class="mbe2" variant="danger">Danger alert</VueAlert>
      <VueAlert class="mbe2" variant="error">Error alert</VueAlert>
      <VueAlert class="mbe2" variant="monochrome">Monochrome alert</VueAlert>
    </div>

    <div class="mbe4">
      <h3>Bordered</h3>
    </div>
    <div class="stacked">
      <VueAlert class="mbe2" bordered>Default alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="success">Success alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="info">Info alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="warning">Warning alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="danger">Danger alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="error">Error alert</VueAlert>
      <VueAlert class="mbe2" bordered variant="monochrome"
        >Monochrome alert</VueAlert
      >
    </div>
    <div class="mbe4">
      <h3>Bordered Left with Icon</h3>
    </div>
    <div class="stacked">
      <VueAlert class="mbe2" borderedLeft>
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-secondary)" :size="18" class="mie2" />
          Default alert
        </div>
      </VueAlert>
      <VueAlert class="mbe2" borderedLeft variant="success">
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-secondary)" :size="18" class="mie2" />Success
          alert
        </div>
      </VueAlert>
      <VueAlert class="mbe2" borderedLeft variant="info">
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-secondary)" :size="18" class="mie2" />Info alert
        </div>
      </VueAlert>
      <VueAlert class="mbe2" borderedLeft variant="warning">
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-warning-dark)" :size="18" class="mie2" />Warning
          alert
        </div>
      </VueAlert>
      <VueAlert class="mbe2" borderedLeft variant="danger">
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-danger-dark)" :size="18" class="mie2" />Danger
          alert
        </div>
      </VueAlert>
      <VueAlert class="mbe2" borderedLeft variant="error">
        <div class="flex-inline items-center justify-center">
          <Info color="var(--ag-error-dark)" :size="18" class="mie2" />Error
          alert
        </div>
      </VueAlert>
    </div>
    <div class="mbe4">
      <h3>Rounded</h3>
    </div>
    <div class="stacked">
      <VueAlert class="mbe2" rounded>Default alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="success">Success alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="info">Info alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="warning">Warning alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="danger">Danger alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="error">Error alert</VueAlert>
      <VueAlert class="mbe2" rounded variant="monochrome"
        >Monochrome alert</VueAlert
      >
    </div>
  </section>
</template>
<script>
import { Info } from "lucide-vue-next";
import VueAlert from "agnosticui-core/alert/vue";
export default {
  name: "AlertExamples",
  components: { VueAlert, Info },
};
</script>

React

import { ReactAlert } from "agnosticui-core/alert/react";

export default function AlertExamples() {
  return (
    <section>
      <div className="mbe4">
        <h3>Alerts</h3>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2">Default alert</ReactAlert>
        <ReactAlert className="mbe2" variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" variant="error">
          Error alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h3>Bordered</h3>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" bordered>
          Default alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" bordered variant="error">
          Error alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h3>Rounded</h3>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" rounded>
          Default alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="info">
          Info alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="primary">
          Primary alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" rounded variant="error">
          Error alert
        </ReactAlert>
      </div>

      <div className="mbe4">
        <h3>Bordered Left</h3>
      </div>
      <div className="stacked">
        <ReactAlert className="mbe2" borderedLeft>
          Default alert
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="success">
          Success alert
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="warning">
          Warning alert
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="danger">
          Danger alert
        </ReactAlert>
        <ReactAlert className="mbe2" borderedLeft variant="error">
          Error alert
        </ReactAlert>
      </div>
    </section>
  );
}

Lit (Web Components)

<script type="module">
  import "agnosticui-core/alert";
</script>

<section>
  <div class="mbe4">
    <h3>Alerts</h3>
  </div>
  <div class="stacked">
    <ag-alert class="mbe2">Default alert</ag-alert>
    <ag-alert class="mbe2" variant="success">Success alert</ag-alert>
    <ag-alert class="mbe2" variant="info">Info alert</ag-alert>
    <ag-alert class="mbe2" variant="primary">Primary alert</ag-alert>
    <ag-alert class="mbe2" variant="warning">Warning alert</ag-alert>
    <ag-alert class="mbe2" variant="danger">Danger alert</ag-alert>
    <ag-alert class="mbe2" variant="error">Error alert</ag-alert>
  </div>

  <div class="mbe4">
    <h3>Bordered</h3>
  </div>
  <div class="stacked">
    <ag-alert class="mbe2" bordered>Default alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="success">Success alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="info">Info alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="primary">Primary alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="warning">Warning alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="danger">Danger alert</ag-alert>
    <ag-alert class="mbe2" bordered variant="error">Error alert</ag-alert>
  </div>

  <div class="mbe4">
    <h3>Rounded</h3>
  </div>
  <div class="stacked">
    <ag-alert class="mbe2" rounded>Default alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="success">Success alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="info">Info alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="primary">Primary alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="warning">Warning alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="danger">Danger alert</ag-alert>
    <ag-alert class="mbe2" rounded variant="error">Error alert</ag-alert>
  </div>

  <div class="mbe4">
    <h3>Bordered Left</h3>
  </div>
  <div class="stacked">
    <ag-alert class="mbe2" borderedLeft>Default alert</ag-alert>
    <ag-alert class="mbe2" borderedLeft variant="success">Success alert</ag-alert>
    <ag-alert class="mbe2" borderedLeft variant="warning">Warning alert</ag-alert>
    <ag-alert class="mbe2" borderedLeft variant="danger">Danger alert</ag-alert>
    <ag-alert class="mbe2" borderedLeft variant="error">Error alert</ag-alert>
  </div>
</section>

Dismissible Alerts

Alerts can be made dismissible by adding the dismissible prop. This displays a close button and fires the alert-dismiss event when clicked.

Vue

<template>
  <div>
    <VueAlert
      v-if="showAlert"
      variant="success"
      dismissible
      @alert-dismiss="showAlert = false"
      class="mbe2"
    >
      This is a dismissible success alert. Click the × to dismiss.
    </VueAlert>

    <VueAlert
      v-if="showWarning"
      variant="warning"
      dismissible
      rounded
      @alert-dismiss="handleWarningDismiss"
      class="mbe2"
    >
      Warning: This action cannot be undone!
    </VueAlert>

    <button v-if="!showAlert" @click="showAlert = true">
      Show Success Alert
    </button>
    <button v-if="!showWarning" @click="showWarning = true">
      Show Warning Alert
    </button>
  </div>
</template>

<script>
import VueAlert from "agnosticui-core/alert/vue";

export default {
  components: { VueAlert },
  data() {
    return {
      showAlert: true,
      showWarning: true,
    };
  },
  methods: {
    handleWarningDismiss(event) {
      console.log("Warning dismissed, variant:", event.detail.variant);
      this.showWarning = false;
    },
  },
};
</script>

React

import { useState } from "react";
import { ReactAlert } from "agnosticui-core/alert/react";

export default function DismissibleAlertExample() {
  const [showAlert, setShowAlert] = useState(true);
  const [showWarning, setShowWarning] = useState(true);

  const handleWarningDismiss = (event) => {
    console.log("Warning dismissed, variant:", event.detail.variant);
    setShowWarning(false);
  };

  return (
    <div>
      {showAlert && (
        <ReactAlert
          variant="success"
          dismissible
          onAlertDismiss={() => setShowAlert(false)}
          className="mbe2"
        >
          This is a dismissible success alert. Click the × to dismiss.
        </ReactAlert>
      )}

      {showWarning && (
        <ReactAlert
          variant="warning"
          dismissible
          rounded
          onAlertDismiss={handleWarningDismiss}
          className="mbe2"
        >
          Warning: This action cannot be undone!
        </ReactAlert>
      )}

      {!showAlert && (
        <button onClick={() => setShowAlert(true)}>Show Success Alert</button>
      )}
      {!showWarning && (
        <button onClick={() => setShowWarning(true)}>Show Warning Alert</button>
      )}
    </div>
  );
}

Lit (Web Components)

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import 'agnosticui-core/alert';

@customElement('alert-dismissible-example')
export class AlertDismissibleExample extends LitElement {
  @state() private showSuccess = true;
  @state() private showWarning = true;

  static styles = css`
    :host {
      display: block;
    }
  `;

  firstUpdated() {
    // Set up event listeners for alerts in the shadow DOM
    const successAlert = this.shadowRoot?.querySelector('#success-alert');
    const warningAlert = this.shadowRoot?.querySelector('#warning-alert');

    successAlert?.addEventListener('alert-dismiss', (e: Event) => {
      const customEvent = e as CustomEvent;
      console.log('Success alert dismissed, variant:', customEvent.detail.variant);
      this.showSuccess = false;
    });

    if (warningAlert) {
      (warningAlert as any).onAlertDismiss = (e: CustomEvent) => {
        console.log('Warning dismissed, variant:', e.detail.variant);
        this.showWarning = false;
      };
    }
  }

  private handleShowSuccess() {
    this.showSuccess = true;
  }

  private handleShowWarning() {
    this.showWarning = true;
  }

  render() {
    return html`
      <div>
        ${this.showSuccess
          ? html`<ag-alert id="success-alert" variant="success" dismissible class="mbe2">
              This is a dismissible success alert. Click the × to dismiss.
            </ag-alert>`
          : html`<button @click=${this.handleShowSuccess}>Show Success Alert</button>`}

        ${this.showWarning
          ? html`<ag-alert id="warning-alert" variant="warning" dismissible rounded class="mbe2">
              Warning: This action cannot be undone!
            </ag-alert>`
          : html`<button @click=${this.handleShowWarning}>Show Warning Alert</button>`}
      </div>
    `;
  }
}

Note: When using alert components within a custom element's shadow DOM, set up event listeners in the component's lifecycle (e.g., firstUpdated()) rather than using DOMContentLoaded, as document.querySelector() cannot access elements inside shadow DOM. Use this.shadowRoot.querySelector() instead.

Props

Prop	Type	Default	Description
variant	'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'error'	'default'	The alert variant type
bordered	boolean	false	Adds a border around the alert
rounded	boolean	false	Applies rounded corners to the alert
borderedLeft	boolean	false	Adds a left border accent to the alert
dismissible	boolean	false	Shows a close button to dismiss the alert

Events

Event	Framework	Detail	Description
alert-dismiss	Vue: @alert-dismiss React: onAlertDismiss Lit: @alert-dismiss or .onAlertDismiss	{ variant: AlertVariant }	Fired when the alert's close button is clicked. Provides the alert variant in the detail.

Event Patterns

AgnosticUI Alert supports three event handling patterns:

1. addEventListener (Lit/Vanilla JS):

const alert = document.querySelector("ag-alert");
alert.addEventListener("alert-dismiss", (e) => {
  console.log("Alert dismissed, variant:", e.detail.variant);
  alert.remove();
});

2. Callback props (Lit/Vanilla JS):

const alert = document.querySelector("ag-alert");
alert.onAlertDismiss = (e) => {
  console.log("Alert dismissed, variant:", e.detail.variant);
  alert.remove();
};

3. Framework event handlers (Vue/React):

<VueAlert dismissible @alert-dismiss="handleDismiss">
  Dismissible alert
</VueAlert>

<ReactAlert dismissible onAlertDismiss={handleDismiss}>
  Dismissible alert
</ReactAlert>

All three patterns work identically thanks to the dual-dispatch system.

CSS Shadow Parts

Shadow Parts allow you to style internal elements of the alert from outside the shadow DOM using the ::part() CSS selector.

Part	Description
ag-alert	The main alert container element

Customization Example

ag-alert::part(ag-alert) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  padding: 1.5rem;
  border: 3px solid #fa709a;
  box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
  font-weight: 600;
}

Notes

• Variant types: Both variant="error" and variant="danger" are supported and interchangeable (they render identically)
• Lit: Properties can be set via attributes (e.g., <ag-alert bordered>) or via property binding in Lit templates (e.g., .bordered=${true})
• All three implementations share the same underlying styles and behavior