EXTENDED UI

SweetAlert2

Big, friendly alerts with animated icons — for moments that deserve a pause. Every button opens a real one.
THEME
01

Playground

Icon, buttons, position, timer and dismissal
Change the settings, then press Show alert
Swal.fire({ icon: "success", title: "…", text: "…", allowOutsideClick: true, allowEscapeKey: true, showCloseButton: true }).then(r => { if (r.isConfirmed) … })
Settings
ICON
BUTTONS
POSITION
AUTO-CLOSE
02

Recipes

Eight alerts used across Avava
✓Sentsuccess · timer 2.5 s
Confirms without asking anything, then closes itself.
!Delete projectwarning → success / info
Danger button on the right, Cancel focused by default.
?Unsaved changes3 buttons
Save / Don’t save / Cancel — the classic leave guard.
✎Renameinput · validation
Prompt with live validation; Enter submits.
⇄Move to folderradio select
One choice from a short list.
◌Publishingloading → result
Can’t be closed while working; turns into the result.
1·2·3Survey chain3 steps
Short questions one after another with a progress row.
✕Error detailserror · collapsible
Human message first, technical details on request.
03

Behaviour

Queues, server checks, “don’t show again”, reduced motion
QueueThree alerts fired at once show one after another — never stacked.
Server check (preConfirm)The name is checked before closing; taken names show an error inside.
Don’t show againThe tip can be dismissed for good; it stops appearing.
Reduced motionNo pop, draw or shake — a simple fade. Follows the system setting.
04

Rules & a11y

Checklist and when to use what
Checklist
✓role="alertdialog" + aria-modaltitle and text linked by aria-labelledby / describedby
✓Focus the safest buttonCancel for destructive, input for prompts
✓Tab stays insidefocus returns to the trigger on close
✓Esc closesunless something is in progress
✓Danger is coral and on the rightwith a verb: “Delete”, not “OK”
✓Timers pause on hoverand never on decisions
✓Reduced motionfade instead of pop, draw and shake
SWEETALERTA moment that deserves a pause: big success, risky decision, short prompt.Delete, publish, rename
TOASTSomething happened; nothing to decide.Saved, copied, sent
MODALA form or content too big for an alert.Invite team, edit client
DO✓Use a verb on the confirm button✓Focus Cancel on destructive alerts✓Keep it to a title and one line✓Queue alerts — one at a time
DON’T✕Show an alert for every save✕Auto-close an alert that asks a question✕Stack two alerts✕Hide the reason behind “Details” only