@miraidesigns/alert NPM

Alerts

Alerts display an important message to the user fixed to the top of the screen.

HTML

Make sure to put this as high in your <body> element as possible.

<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

mirai designs framework button

@miraidesigns/base @miraidesigns/fx @miraidesigns/theme @miraidesigns/utils

@infinitebrahmanuniverse/nolb-_mir @everything-registry/sub-chunk-607 @zalastax/nolb-_mir

1.0.0

4 years ago