Alert
Something the reader should know before carrying on.
Default and destructive
One that informs, one that warns.
Version 0.4.2 is out
Run the command again to pick up the newest files.
The stylesheet is missing an import
Without philcn/source.css, menus and dialogs come out unstyled.
A line of explanation that stays on the page, as opposed to a dialog, which stops it. Put the icon first, then a title short enough to be read at a glance, then what to do about it.
Installation
npx philcn@latest add alertThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| Alert.variant | "default" | "destructive" | null | Destructive for something that went wrong or is about to; default for the rest. |
Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <div>.
Worth knowing
- An alert that appears after the page has loaded — a failed save, say — should be announced: give it `role="alert"`, and a screen reader will read it out.