GariDialog

A lightweight, modern dialog component. Fully custom, dependency-free, and framework-agnostic.

[NEW] Now with sound notifications!

Installation

Install GariDialog via npm or include the files directly in your project. 

npm install garidialog

Or include the CSS and JS files from GitHub Pages:

<link rel="stylesheet" href="https://holmberg28.github.io/gari-dialog/dist/garidialog.min.css" />
<script src="https://holmberg28.github.io/gari-dialog/dist/garidialog.min.js"></script>

Live Examples


GariDialog({
  title: "Hello!",
  text: "This is a simple alert.",
  icon: "fa-solid fa-bell",
  color: "success",
  close: "Got it",
  sound: true,
});


GariDialog({
  title: "Are you sure?",
  text: "Do you really want to continue?",
  color: "warning",
  icon: "fa-solid fa-triangle-exclamation",
  close: "Cancel",
  sound: true,
  actions: {
    confirm: "Yes, continue"
  }
}).then(r => console.log(r));

                
{
    "confirm": true,
    "inputs": {}
}

GariDialog({
  title: "Enter Name",
  icon: "fa-solid fa-user",
  color: "info",
  actions: { ok: "Submit" },
  sound: "info",
  promptInput: [
    { type: "text", label: "Name", name: "name" }
  ]
}).then(result => console.log(result));

                
{
    "ok": true,
    "inputs": {
        "name": "My name"
    }
}

GariDialog({
  title: "Fullscreen Dialog",
  text: "Covers the entire screen.",
  icon: "fa-solid fa-expand",
  color: "dark",
  size: "fullscreen",
});

Props & Options

Property Type Description
title string Dialog title
text string Plain message text
html string Custom HTML content
icon string FontAwesome, Bootstrap Icons, Material Symbols, or emoji
color string Primary theme color
actions object { key: "Button Text" }
close string | false Label of the cancel button, or false to hide it
size “sm”, “md”, “lg”, “fullscreen” Dialog width
promptInput array Array of input configs for prompts.
Each config supports: type, label, name, defaultValue, placeholder.
Example: [{ type: "text", label: "Name", name: "name" }]
sound boolean | string Play a sound notification.
Set to true to use default sound based on color, or provide a specific sound type ("success", "danger", "warning", "info").
autoSelect boolean Automatically focus and select the first input in prompts
escape boolean Allow closing the dialog with the Escape key

Available Colors

You can use any of these theme names, or provide any valid hex color (e.g. #ff6600).

primary
secondary
success
danger
warning
info
light
dark

Icons

You can use:

  • FontAwesome — "fa-solid fa-check"
  • Bootstrap Icons — "bi-alarm"
  • Material Symbols — "warning"
  • Emoji — "🔥"