<div id="alert" class="mdf-alert" role="alert">
    <div class="mdf-alert__content">
        <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
            <use href="icons.svg#error"></use>
        </svg>

        <span class="mdf-alert__text">This is an alert message</span>
    </div>

    <div class="mdf-alert__actions">
        <button class="mdf-button" data-alert-action="cancel">Dismiss</button>
        <button class="mdf-button" data-alert-action="confirm">Confirm</button>
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/alert/styles';

// Configure appearance
@use '@miraidesigns/alert' with (
    $variable: value
);

@include alert.styles();

TypeScript

import { MDFAlert } from '@miraidesigns/alert';

const alert = new MDFAlert(document.querySelector('.mdf-alert'));
alert.showAlert();

Implementation

Attributes

Name	Element	Description
`data-alert-action="cancel"`	`<button>`	Will execute the `onCancel` function when this button is clicked
`data-alert-action="confirm"`	`<button>`	Will execute the `onConfirm` function when this button is clicked

Classes

Name	Type	Description
`mdf-alert`	Parent	Alert element
`mdf-alert--active`	Modifier	1. Prepares the alert to be visible
`mdf-alert--move-in`	Modifier	2. Moves the alert on screen and allows for interaction
`mdf-alert--filled`	Modifier	Fills the alert's background with the set `brand` color
`mdf-alert--warning`	Modifier	Fills the alert's background with the set `warning` color
`mdf-alert--error`	Modifier	Fills the alert's background with the set `error` color
`mdf-alert__content`	Parent / Child	Contains the alert text and actions. Child to `.mdf-alert`
`mdf-alert__text`	Child	Alert text. Child to `.mdf-alert__content`
`mdf-alert__actions`	Child	Alert action buttons. Child to `.mdf-alert__content`

Events

Name	Data	Description
`MDFAlert:opened`	`null`	Fires once the alert has been opened
`MDFAlert:closed`	`null`	Fires once the alert has been closed

Properties

Name	Type	Description
`.alert`	`HTMLElement`	Returns the alert element
`.message`	`string`	Get or set the alert's text message
`.showAlert(delay?)`	`(number): void`	Show the alert, optionally with a delay

Options

Name	Type	Default	Description
`onOpen`	`() => void`	`null`	Function will run when the alert is opened
`onConfirm`	`() => void`	`null`	Function will run when the alert is confirmed
`onCancel`	`() => void`	`null`	Function will run when the alert is dismissed

Keywords

mirai designs framework

button

FAQs

What is @miraidesigns/alert?

Is @miraidesigns/alert well maintained?

Package last updated on 13 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@miraidesigns/alert

Alerts

HTML