Dialogs
Modal dialogs, alert messages, and confirm prompts with keyboard support and backdrop dismiss.
Basic Dialog
A dialog container with a trigger button and card content. Available in multiple sizes: sm, md, lg, xl.
Dialog (SM)
This is a sm size dialog. The dialog component is a container overlay that wraps any content you want to show in a modal.
Dialog (MD)
This is a md size dialog. The dialog component is a container overlay that wraps any content you want to show in a modal.
Dialog (LG)
This is a lg size dialog. The dialog component is a container overlay that wraps any content you want to show in a modal.
Dialog (XL)
This is a xl size dialog. The dialog component is a container overlay that wraps any content you want to show in a modal.
<%= bui_dialog(size: :md) do |d| %>
<% d.with_trigger do %>
<%= bui_button(variant: :primary) { "Open Dialog" } %>
<% end %>
<%= bui_card(style: :bordered, shadow: :md) do |card| %>
<% card.with_header do %>
<h3 class="text-lg font-semibold">Dialog Title</h3>
<% end %>
<% card.with_body do %>
<p>Dialog body content here.</p>
<% end %>
<% card.with_footer do %>
<div class="flex justify-end gap-2">
<%= bui_button(variant: :light, size: :sm) { "Cancel" } %>
<%= bui_button(variant: :primary, size: :sm) { "Save" } %>
</div>
<% end %>
<% end %>
<% end %>Alert Dialogs
Pre-styled alert dialogs for each variant with icon, title, and text.
Information
This is an informational alert. Click OK to dismiss.
Success!
Your changes have been saved successfully.
Warning
Please review your input before proceeding.
Error
Something went wrong. Please try again later.
<%= bui_dialog_alert(variant: :success, title: "Success!", text: "Your changes have been saved.") do |a| %>
<% a.with_trigger do %>
<%= bui_button(variant: :success) { "Show Success Alert" } %>
<% end %>
<% end %>
<%= bui_dialog_alert(variant: :danger, title: "Error", text: "Something went wrong.") do |a| %>
<% a.with_trigger do %>
<%= bui_button(variant: :danger) { "Show Error Alert" } %>
<% end %>
<% end %>Confirm Dialogs
Confirm dialogs with customizable confirm/cancel labels. Defaults to blocking backdrop and escape key dismiss.
Unsaved Changes
You have unsaved changes. Are you sure you want to leave?
Delete Item?
This action cannot be undone. All associated data will be permanently removed.
Send Notification?
This will send an email notification to all team members.
<%= bui_dialog_confirm(
variant: :danger,
title: "Delete Item?",
text: "This action cannot be undone.",
confirm_label: "Delete",
cancel_label: "Keep"
) do |c| %>
<% c.with_trigger do %>
<%= bui_button(variant: :danger) { "Delete" } %>
<% end %>
<% end %>Dialog Options
Control backdrop click, escape key, and close button visibility.
Backdrop Disabled
Clicking the backdrop will not close this dialog. Use the close button or the button below.
Escape Disabled
Pressing the Esc key will not close this dialog.
No Close Button
The X close button is hidden. Use the button below or click the backdrop to close.
<%# Backdrop click disabled %>
<%= bui_dialog(size: :md, close_on_backdrop: false) do |d| %>
<% d.with_trigger do %>
<%= bui_button(variant: :accent) { "Open" } %>
<% end %>
<%# ... card content ... %>
<% end %>
<%# Escape key disabled %>
<%= bui_dialog(size: :md, close_on_escape: false) do |d| %>
<%# ... %>
<% end %>
<%# Close button hidden %>
<%= bui_dialog(size: :md, show_close_button: false) do |d| %>
<%# ... %>
<% end %>