Modals

API Docs

Modals are used to display content that requires user interaction. They are typically used to display forms, alerts, or other content that requires user input.

Modals are most often opened through the click of a button. They can be closed by clicking on the x icon in the top right, by clicking outside of the modal, or by submitting a <form method='dialog'> inside the modal.

Note

If no button or activator is provided, a very basic default button will be used instead. The button title will match the title of the modal.

Preview

Code

.flex.flex-col.items-center
  = daisy_modal(title: "Simple Modal") do |modal|
    - modal.with_button(css: 'btn-primary') do
      Open Modal

    Here is some really long modal content that should go well past the
    spot where the close icon appears...

    - modal.with_end_actions(css: "flex flex-row items-center gap-2") do
      %form{ method: :dialog }
        = daisy_button do
          Cancel
      %form{ action: "", method: :get }
        %input{ type: "hidden", name: "submitted", value: "true" }
        = daisy_button(css: "btn-primary") do
          Submit

  - if params[:submitted] == "true"
    %p.my-2.font-bold.italic
      You submitted the modal!

Custom Activator

Sometimes you want to use something other than a button to trigger the modal. You can use the activator slot to specify any custom HTML element as the trigger.

Preview

Notify Me

Code

.flex.flex-col.items-center
  = daisy_modal(title: "Custom Activator Modal") do |modal|
    - modal.with_activator do
      = daisy_card(css: "cursor-pointer border border-base-300 hover:border-primary bg-base-100 transition-colors w-64") do |card|
        - card.with_top_figure css: "aspect-video", src: image_path("landscapes/mountain-river.jpg")

        .flex.justify-center.items-center.gap-2.p-4.font-bold
          = hero_icon(:bell, css: "size-6")
          .text-xl Notify Me

    This modal was opened using a custom activator instead of a button.
    You can use any HTML element as an activator!

    - modal.with_start_actions(css: "flex flex-row items-center gap-2") do
      %form{ method: :dialog }
        = daisy_button do
          I'm Done

Made with by Profoundry .

Modals

Docs

Guides

Hero

Daisy