Alert

The Alert component displays important messages to users with different severity levels.

Installation

npm install @duskmoon-dev/el-alert

Usage

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

<el-dm-alert type="info" title="Information">
  This is an informational message.
</el-dm-alert>

Live Demo

Alert Types

This is an info message.

Operation completed successfully.

Please review before proceeding.

An error occurred.

Properties

Property	Type	Default	Description
`type`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Alert severity
`variant`	`'filled' \| 'outlined'`	-	Visual style variant
`dismissible`	`boolean`	`false`	Shows close button
`compact`	`boolean`	`false`	Uses compact styling
`title`	`string`	-	Alert title

Types

Alert Types

Info alert

Success alert

Warning alert

Error alert

<el-dm-alert type="info">Info alert</el-dm-alert>
<el-dm-alert type="success">Success alert</el-dm-alert>
<el-dm-alert type="warning">Warning alert</el-dm-alert>
<el-dm-alert type="error">Error alert</el-dm-alert>

Variants

Alert Variants

Filled info

Outlined info

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

Dismissible

Dismissible Alert

Click the X to dismiss this alert.

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

Events

Event	Description
`dismiss`	Fired when alert is dismissed

Event Handling

const alert = document.querySelector('el-dm-alert');
alert.addEventListener('dismiss', () => {
  console.log('Alert dismissed');
});

Slots

Slot	Description
default	Alert content
`icon`	Custom icon
`actions`	Action buttons

Accessibility

Uses role="alert" for screen reader announcements
Dismissible alerts have accessible close buttons
Color is not the only indicator of severity