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.tstemplates/ui/confirmdialog/ConfirmDialog.d.tstemplates/ui/confirmactionbutton/ConfirmActionButton.d.tstemplates/ui/nameinputdialog/NameInputDialog.d.tstemplates/ui/modal/Modal.d.tstemplates/ui/menu/Menu.d.tstemplates/ui/dropdownlist/DropDownList.d.tstemplates/ui/simpledropdownlist/SimpleDropDownList.d.tstemplates/ui/toast/Toast.d.tstemplates/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.
1---2name: rexui-dialogs-and-popups3description: 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.4---56# RexUI Dialogs And Popups78Use this skill for RexUI interaction flows that open, close, select, confirm, or notify.910## Use This First1112Choose the popup component:1314| Need | Use |15|---|---|16| Fully custom title/content/choices/actions layout | `dialog` |17| Standard yes/no, ok/cancel, or choice confirmation | `confirmDialog` |18| Confirmation behavior attached to a button | `confirmActionButton` |19| Prompt for a name/text value | `nameInputDialog` |20| Make an existing RexUI object modal | `modal`, `modalPromise`, `modalClose` |21| Hierarchical or popup menu | `menu` |22| Select one option from a popup list | `dropDownList` or `simpleDropDownList` |23| Short notification | `toast` |24| Multiple queued notifications | `toastQueue` |2526For layout details inside dialog content, use `rexui-layout-sizers`. For button visuals and selection state, use `rexui-basic-widgets`.2728## Required Setup2930This skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.3132## References3334Read these only when needed:3536- `references/dialog-config.md`: component chooser and key config fields.37- `references/modal-patterns.md`: modal lifecycle, promises, close behavior.38- `references/dialog-recipes.md`: reduced recipes for dialog, confirm, dropdown, toast, and modal.3940## Core Rules4142- Call `.layout()` before `.modal()`, `.modalPromise()`, `.popUp()`, or relying on bounds.43- Use `confirmDialog` for common confirmation flows instead of hand-building `dialog`.44- Use `dialog` when the layout has custom toolbars, descriptions, choices, or action sections.45- Use `modalPromise()` when caller needs a result object.46- Use `dropDownList` when the selected value should live in the label itself.47- Use `toast` for one toast instance with internal message queue; use `toastQueue` for visible stacked messages.48- Do not use these skills for generic browser dialogs or DOM popups unless RexUI is explicitly involved.4950## Source File Map5152- `templates/ui/dialog/Dialog.d.ts`53- `templates/ui/confirmdialog/ConfirmDialog.d.ts`54- `templates/ui/confirmactionbutton/ConfirmActionButton.d.ts`55- `templates/ui/nameinputdialog/NameInputDialog.d.ts`56- `templates/ui/modal/Modal.d.ts`57- `templates/ui/menu/Menu.d.ts`58- `templates/ui/dropdownlist/DropDownList.d.ts`59- `templates/ui/simpledropdownlist/SimpleDropDownList.d.ts`60- `templates/ui/toast/Toast.d.ts`61- `templates/ui/toastqueue/ToastQueue.d.ts`6263## Related Skills6465- `rexui-setup-and-factory`: plugin setup and factory discovery.66- `rexui-components-catalog`: choose the correct component family.67- `rexui-layout-sizers`: internal dialog layout.68- `rexui-basic-widgets`: labels, buttons, and button state.69- `rexui-text-and-input`: text input and textarea content.
rexrainbow