Lightweight and accessible drop-in replacement for the built-in browser dialog methods alert, confirm and prompt.
using npm
npm install @devlop-ab/dialogAll methods are compatible with the standard dialog methods and accept the same arguments,
plus an additional options argument to change basic dialog appearance and behaviour.
All methods returns a promise, so by using await we can mimic the built in behaviour of halting execution of the current function while waiting for the dialog response.
import{dialog}from'@devlop-ab/dialog';// alert (no return value)awaitdialog.alert('Hello world!');// confirm (returns true or false)constresult=awaitdialog.confirm('Do you really want to leave?');// prompt (returns string or null if cancelled)constresult=awaitdialog.prompt('Are you feeling lucky?','sure');All dialog methods accept an (optional) options argument where you can do basic configuration changes.
See https://devlop.github.io/dialog for more examples.
// all options are optional{'title': 'Title of the dialog','okText': 'Yes','cancelText': 'No','focus': 'cancel',}// examplesawaitdialog.alert('I\'m afraid i can\'t do that Dave.',{'title': 'HAL',});constresult=awaitdialog.confirm('Do you really want to leave?',{'okText': 'Yes','cancelText': 'No',});The javascript does not output any styles, you must include them in your css/sass build.
Using SASS
// importing the theme "sky".@import'@devlop-ab/dialog/dist/css/sky.css';See https://devlop.github.io/dialog for all available themes.
Using vanilla CSS
Copy the css file for the theme you want to use from node_modules/@devlop-ab/dialog/dist/css directory and put it with your other assets.
Each theme exposes a plethora of css variables allowing you to change colors, fonts and padding without overriding any css selectors.
// importing using sass@import'@devlop-ab/dialog/dist/css/sky.css';
[data-dialog] {
--theme-color-hue: 310;
}