Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Footagesus/WindUI/llms.txt

Use this file to discover all available pages before exploring further.

A dialog is a modal panel that appears centered over the window. While open, it captures all input — the user must interact with its buttons before they can use the rest of the UI again. Dialogs are created by calling Window:Dialog(Config).

​
Basic usage

Window:Dialog({
  Title = "Confirm Action",
  Content = "Are you sure you want to proceed?",
  Icon = "alert-triangle",
  Buttons = {
    {
      Title = "Cancel",
      Icon = "x",
      Variant = "Secondary",
      Callback = function() end,
    },
    {
      Title = "Confirm",
      Icon = "check",
      Variant = "Primary",
      Callback = function()
        print("Confirmed!")
      end,
    },
  },
})

​
Parameters

​
Title
string
default:"\"Dialog\""
Heading text displayed at the top of the dialog.
​
Content
string
Body text shown below the title. Supports RichText markup.
​
Icon
string
Icon name (e.g. "alert-triangle") shown to the left of the title. Optional.
​
IconThemed
boolean
When true, the icon tint follows the current theme’s text color.
​
Width
number
default:"320"
Width of the dialog panel in pixels. Clamped between 180 and 400.
​
Buttons
table
An ordered array of button configs. Buttons are laid out horizontally; if they overflow they stack vertically.Each button supports:
FieldTypeDescription
TitlestringButton label
IconstringOptional icon name
VariantstringVisual style: "Primary", "Secondary", or "Tertiary"
CallbackfunctionCalled when the button is clicked

​
Button variants

Use for the main, affirmative action (e.g. Confirm, Save, Close Window). Rendered with a filled, prominent background.
{ Title = "Close Window", Variant = "Primary", Callback = function() Window:Destroy() end }
Use for the dismissive or neutral action (e.g. Cancel, Go back). Rendered with a subdued background.
{ Title = "Cancel", Variant = "Secondary", Callback = function() end }
Use for optional or low-emphasis actions. Rendered with minimal visual weight.
{ Title = "Learn more", Variant = "Tertiary", Callback = function() end }

​
How dialogs work

1

Create the window

A Window must exist before you call :Dialog(). The dialog is positioned and clipped inside the window’s main frame.
2

Call Window:Dialog(Config)

WindUI builds the dialog, attaches a dimmed full-screen overlay over the window, and calls Dialog:Open() automatically.
3

User clicks a button

Each button’s Callback fires when clicked. To close the dialog from inside a callback, the internal Dialog:Close() method is called automatically after the callback returns.
WindUI itself uses Window:Dialog() for the built-in Close Window confirmation. You can see this pattern in practice by clicking the window’s close button.

​
Close Window example (built-in pattern)

Window:Dialog({
  Title = "Close Window",
  Content = "Do you want to close this window? You will not be able to open it again.",
  Buttons = {
    {
      Title = "Cancel",
      Variant = "Secondary",
      Callback = function() end,
    },
    {
      Title = "Close Window",
      Variant = "Primary",
      Callback = function()
        Window:Destroy()
      end,
    },
  },
})

​
Return value

Window:Dialog() returns the dialog object. You can call Dialog:Close() on it to dismiss the dialog programmatically without a button click. 
local d = Window:Dialog({ Title = "Loading…", Buttons = {} })
task.wait(2)
d:Close()

Build docs developers (and LLMs) love

Get started for freeTalk to us