# Rexui Dialogs And Popups

> Use this skill when building RexUI dialogs, confirmDialog, confirmActionButton, nameInputDialog, modal overlays, popup panels, menus, dropDownList, simpleDropDownList, toast, or toastQueue flows. Triggers on: RexUI dialog, RexUI confirmDialog, RexUI modal, RexUI popup, RexUI dropdown, RexUI dropDownList, RexUI menu, RexUI toast, modalPromise.

- Skill: `rexrainbow/rexui-dialogs-and-popups` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add rexrainbow/rexui-dialogs-and-popups`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rexrainbow/rexui-dialogs-and-popups/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: rexrainbow (https://skillmd.com/u/rexrainbow)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rexrainbow/rexui-dialogs-and-popups

---


# RexUI Dialogs And Popups

Use this skill for RexUI interaction flows that open, close, select, confirm, or notify.

## Use This First

Choose the popup component:

| Need | Use |
|---|---|
| Fully custom title/content/choices/actions layout | `dialog` |
| Standard yes/no, ok/cancel, or choice confirmation | `confirmDialog` |
| Confirmation behavior attached to a button | `confirmActionButton` |
| Prompt for a name/text value | `nameInputDialog` |
| Make an existing RexUI object modal | `modal`, `modalPromise`, `modalClose` |
| Hierarchical or popup menu | `menu` |
| Select one option from a popup list | `dropDownList` or `simpleDropDownList` |
| Short notification | `toast` |
| Multiple queued notifications | `toastQueue` |

For layout details inside dialog content, use `rexui-layout-sizers`. For button visuals and selection state, use `rexui-basic-widgets`.

## Required Setup

This skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.

## References

Read these only when needed:

- `references/dialog-config.md`: component chooser and key config fields.
- `references/modal-patterns.md`: modal lifecycle, promises, close behavior.
- `references/dialog-recipes.md`: reduced recipes for dialog, confirm, dropdown, toast, and modal.

## Core Rules

- Call `.layout()` before `.modal()`, `.modalPromise()`, `.popUp()`, or relying on bounds.
- Use `confirmDialog` for common confirmation flows instead of hand-building `dialog`.
- Use `dialog` when the layout has custom toolbars, descriptions, choices, or action sections.
- Use `modalPromise()` when caller needs a result object.
- Use `dropDownList` when the selected value should live in the label itself.
- Use `toast` for one toast instance with internal message queue; use `toastQueue` for visible stacked messages.
- Do not use these skills for generic browser dialogs or DOM popups unless RexUI is explicitly involved.

## Source File Map

- `templates/ui/dialog/Dialog.d.ts`
- `templates/ui/confirmdialog/ConfirmDialog.d.ts`
- `templates/ui/confirmactionbutton/ConfirmActionButton.d.ts`
- `templates/ui/nameinputdialog/NameInputDialog.d.ts`
- `templates/ui/modal/Modal.d.ts`
- `templates/ui/menu/Menu.d.ts`
- `templates/ui/dropdownlist/DropDownList.d.ts`
- `templates/ui/simpledropdownlist/SimpleDropDownList.d.ts`
- `templates/ui/toast/Toast.d.ts`
- `templates/ui/toastqueue/ToastQueue.d.ts`

## Related Skills

- `rexui-setup-and-factory`: plugin setup and factory discovery.
- `rexui-components-catalog`: choose the correct component family.
- `rexui-layout-sizers`: internal dialog layout.
- `rexui-basic-widgets`: labels, buttons, and button state.
- `rexui-text-and-input`: text input and textarea content.