Toast Messages¶

Void ships a lightweight toast notification system. It's used internally by buttons, forms, and inputs, and is exposed as a global function so you can call it from your own inline JavaScript or on-click attributes.

Quick start¶

The simplest way is a button with an inline onclick:

<button class="void-btn" onclick="voidToast('Hello from Void')">Show toast</button>
<button class="void-btn void-btn--accent"
        onclick="voidToast('Saved successfully', 'success')">Success</button>
<button class="void-btn void-btn--ghost"
        onclick="voidToast('Something went wrong', 'error')">Error</button>

API¶

voidToast(message, type)

• message — string — the text to display. Required.
• type — string — one of "info" (default), "success", or "error". Controls the icon and accent color.

From a script¶

<button class="void-btn void-btn--pill" id="save-btn">Save changes</button>
<script>
  document.getElementById("save-btn").addEventListener("click", function () {
    voidToast("Changes saved", "success")
  })
</script>

Timing¶

Toasts auto-dismiss after ~2.6 seconds. Only one toast is shown at a time — a new call replaces the current one. A prefers-reduced-motion: reduce preference disables the animation.

Automatic usage¶

The theme already fires toasts for you:

• Clicking any .void-btn → "Clicked: <label>" (info)
• Submitting a valid .void-form → "Form submitted" (success)
• Submitting an invalid .void-form → error toast
• Pressing Enter / changing an input, select, or textarea → confirmation toast