Modal

Modal dialogs for focused user interactions.

Try It

Click any button to open a real modal dialog.

Basic Modal

A modal with header, body, and footer slots.

Confirm Action

Are you sure you want to continue? This action cannot be undone.

<%= render Rvk::ModalComponent.new do |modal| %>
  <% modal.with_header do %>
    Confirm Action
  <% end %>

  <% modal.with_body do %>
    <p>Are you sure you want to continue? This action cannot be undone.</p>
  <% end %>

  <% modal.with_footer do %>
    <%= render Rvk::ButtonComponent.new(variant: :ghost).with_content("Cancel") %>
    <%= render Rvk::ButtonComponent.new(variant: :primary).with_content("Confirm") %>
  <% end %>
<% end %>

Sizes

Modals come in 4 sizes. Click to see each size.

<%= render Rvk::ModalComponent.new(size: :sm) do |modal| %>
  ...
<% end %>

<%= render Rvk::ModalComponent.new(size: :lg) do |modal| %>
  ...
<% end %>

Opening Modals

Use Stimulus to control modal visibility.

To open: data-action="click->rvk-modal#open"

To close: data-action="click->rvk-modal#close"

Auto-close: Click backdrop or press Escape (when dismissible: true)

<%= render Rvk::ButtonComponent.new(
  data: { action: "click->rvk-modal#open" }
) { "Open Modal" } %>

<%= render Rvk::ModalComponent.new(dismissible: true) do |modal| %>
  ...
<% end %>

Form Modal

Common pattern for form dialogs.

Create New Project

Project Name

Description

<%= render Rvk::ModalComponent.new do |modal| %>
  <% modal.with_header do %>
    Create New Project
  <% end %>

  <% modal.with_body do %>
    <%= render Rvk::InputComponent.new(
      name: "project_name",
      label: "Project Name",
      placeholder: "My awesome project"
    ) %>
    <%= render Rvk::TextareaComponent.new(
      name: "project_desc",
      label: "Description",
      rows: 3
    ) %>
  <% end %>

  <% modal.with_footer do %>
    <%= render Rvk::ButtonComponent.new(variant: :ghost).with_content("Cancel") %>
    <%= render Rvk::ButtonComponent.new(variant: :primary).with_content("Create Project") %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
size	Symbol	:md	Modal width: :sm, :md, :lg, :xl
dismissible	Boolean	true	Allow closing via backdrop click or Escape
open	Boolean	false	Whether modal is initially visible

Slots

Slot	Description
header	Modal title area with close button
body	Main content area
footer	Action buttons area (right-aligned)