Components
Modal
IgnitionKit provides a powerful and flexible modal system that abstracts away the complexities of modal setup and management, shifting focus to content and functionality, so each modal is easy to configure and behaves appropriately for its purpose.
Composer
Compose a live preview
Pick options and update the preview. The shell is a real ModalComponent render from the server (Turbo Frame), so what you see is what you get.
Options
Triggers
One modal, different opens
Every control below opens the same baseline modal (pg-basic) so you can compare patterns. Shell variants, sizes, slots, and lazy content are exercised in the composer above.
Trigger lab
Same modal, different trigger strategies.
ModalTriggerComponent
AppButtonComponent + modal-trigger data
Simple link trigger
Open with text linkIcon-only AppButtonComponent
Same modal-trigger setup as text buttons; title supplies the accessible name.
Dropdown menu item
A nested action can open a modal; DropdownItemComponent merges your data-action with the dropdown close handler.
Keyboard command (no visible trigger)
Press Shift +
M
anywhere on this page to open a separate shortcut demo modal (pg-shortcut).
Window events
Open from views and scripts
The shell listens on window. Use the same id on ModalComponent and as modalId in events.
Open from a view
<%= render ModalTriggerComponent.new(
modal_id: "my-modal",
text: "Open"
) %>Open from JavaScript
window.dispatchEvent(
new CustomEvent("modal:open", {
detail: { modalId: "my-modal" },
})
);Close — Escape, backdrop click, or modal:close with the same detail.modalId.
Hooks — modal:opened and modal:closed on window (same detail). Sizes, lazy Turbo body, and slots are ModalComponent options—use the composer to explore them.