MsgBox (alert, confirt, prompt) component for browser.style
npm install @browser.style/msg-boxA web component that provides modern replacements for window.alert(), window.confirm(), and window.prompt() using the native element.
``bash`
npm install @browser.style/msg-box
`javascript`
import '@browser.style/msg-box';
`html`
`javascript
const msgBox = document.querySelector('msg-box');
// Alert
msgBox.alert('Message', 'Optional title');
// Confirm
const status = await msgBox.confirm('Are you sure?', 'Optional title');
console.log(status); // true or false
// Prompt
const value = await msgBox.prompt('Enter value:', 'Default value', 'Optional title');
console.log(value); // Entered value or false if cancelled
`
- lang: Set language for button labels (defaults to browser language)dismiss
- : Enable light dismiss (allows closing dialog by clicking outside or pressing Escape)
- --AccentColor: Primary color for buttons (default: system accent color)--AccentColorText
- : Text color for primary buttons--msgbox-backdrop
- : Background color of dialog backdrop--msgbox-bdrs
- : Border radius of dialog--msgbox-bxsh
- : Box shadow of dialog--msgbox-p
- : Padding of dialog
The component includes built-in translations for the following languages:
- German (de)
- English (en)
- Spanish (es)
- Japanese (ja)
- Russian (ru)
- Chinese (zh)
English is used as fallback when the requested language is not available. You can add or override translations:
`javascript`
msgBox.i18n = {
pirate: { ok: 'Aye!', cancel: 'Nay!' }
};
- alert(message, headline?): Shows alert dialogconfirm(message, headline?)
- : Shows confirm dialog, returns Promiseprompt(message, value?, headline?)
- : Shows prompt dialog, returns Promise
All methods return Promises that resolve when the dialog is closed:
- Alert: No return value
- Confirm: Returns true (OK) or false (Cancel/Escape)false` (Cancel/Escape)
- Prompt: Returns input value (OK) or