Moon liveview storybook Moon Liveview Storybook

Modal

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub

Hello there

This is a Modal

Attribute Type Documentation Default Value
Required id * :string

A unique identifier for the component
initial_state :string

Initial state of the element
"close"
mode :string

Determines the mode of the component
"drawer"
class :any

CSS class for the component
""
content_class :any

CSS class for inner content
""
on_close :string

Callback to be triggered when the component is closed
""
disable_native_dialog :boolean

Disable native dialog
false
close_button :boolean

Show the close button
false
no_dragger :boolean

Hides the drag handle if true
false
rest :global

Additional attributes for the component
target :string

The target for the live_component
inner_block :slot

Inner slot

 
<div class="flex flex-col items-center" data-testid="modal-default-content">
  <h3 class="text-heading-500 transition-colors" data-testid="modal-default-title">
    Hello there
  </h3>
  <p class="text-body-500 transition-colors" data-testid="modal-default-description">
    This is a Modal
  </p>
  <.button
    class="mt-space-40"
    phx-click={hide_drawer("#modal-single-default")}
    data-testid="modal-default-close-button"
  >
    Close
  </.button>
</div>