Mammoth Templates logomammoth templates

Home / Components / Feedback & Overlays

Video preview

Modal & Toast System is a complete feedback layer for any website or web app. Open modals and drawers with a single call, await confirm, alert and prompt dialogs as Promises, and fire toast notifications that stack, merge duplicates, pause on hover and morph through loading, success and error states with toast.promise(). Accessibility is built in: the top-most dialog traps focus, the rest of the page becomes inert, Esc and backdrop click behave as expected (or shake when disabled), focus returns to the opener, and toasts use polite or assertive live regions.

Five entrance animations, bottom-sheet behaviour on phones and reduced-motion support are included. It is one CSS file and one JS file with a small documented API, six toast positions, a flat or collapsed deck stack, CSS-variable theming and light/dark mode. The demo page lets you try every variant and tweak toast settings live.

Highlights

  • Modals in 5 sizes and 5 animations, plus drawers from any edge
  • Promise-based confirm, alert and prompt with validation
  • Toasts: types, actions, progress, swipe, dedupe, 6 positions
  • Collapsible deck stacking that fans out on hover
  • toast.promise() for loading, success and error states
  • Focus trap, inert background, focus restore, ESC, scroll lock
  • Nested dialogs, async button loading, form submit integration
  • Bottom-sheet on mobile, dark mode, reduced-motion safe