@duskmoon-dev/el-alert

A customizable alert component for displaying messages built with Web Components.

Installation

bun add @duskmoon-dev/el-alert

Usage

Auto-Register

import '@duskmoon-dev/el-alert/register';

<el-dm-alert type="success">Operation completed successfully!</el-dm-alert>

Manual Registration

import { ElDmAlert, register } from '@duskmoon-dev/el-alert';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-alert', ElDmAlert);

Types

| Type | Description | |------|-------------| | info | Informational message (default) | | success | Success message | | warning | Warning message | | error | Error message |

Variants

| Variant | Description | |---------|-------------| | filled | Filled background (default) | | outlined | Outlined style | | soft | Soft/subtle background |

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | type | string | 'info' | Alert type: info, success, warning, error | | variant | string | 'filled' | Style variant: filled, outlined, soft | | dismissible | boolean | false | Show dismiss button | | compact | boolean | false | Compact display mode | | title | string | '' | Alert title |

Slots

| Slot | Description | |------|-------------| | (default) | Alert content | | icon | Custom icon | | actions | Action buttons |

CSS Parts

| Part | Description | |------|-------------| | alert | The main alert container | | icon | The icon container | | content | The content wrapper | | title | The title element | | close | The close button |

Events

| Event | Detail | Description | |-------|--------|-------------| | dismiss | - | Fired when alert is dismissed |

Examples

Basic Types

<el-dm-alert type="info">This is an info alert.</el-dm-alert>
<el-dm-alert type="success">This is a success alert.</el-dm-alert>
<el-dm-alert type="warning">This is a warning alert.</el-dm-alert>
<el-dm-alert type="error">This is an error alert.</el-dm-alert>

With Title

<el-dm-alert type="success" title="Success!">
  Your changes have been saved.
</el-dm-alert>

Dismissible

<el-dm-alert type="info" dismissible>
  Click the X to dismiss this alert.
</el-dm-alert>

Variants

<el-dm-alert type="info" variant="filled">Filled</el-dm-alert>
<el-dm-alert type="info" variant="outlined">Outlined</el-dm-alert>
<el-dm-alert type="info" variant="soft">Soft</el-dm-alert>

Compact

<el-dm-alert type="info" compact>Compact alert</el-dm-alert>

With Actions

<el-dm-alert type="warning" dismissible>
  Your session is about to expire.
  <div slot="actions">
    <el-dm-button size="sm">Extend</el-dm-button>
  </div>
</el-dm-alert>

License

MIT