@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