> ## Documentation Index
> Fetch the complete documentation index at: https://tonic.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Modals

Modals are powered by Base Styles for styling, and [Modals.js](https://github.com/reallygoodsoftware/h1rails/blob/master/public/preact/components/Modals.js) - which manages the html and exposes some javascript helper functions.

You can either load a modal from a url, or from a div (usually hidden) somewhere on the page.

To trigger a modal, simply call the `launchModal()` function from an onclick event or elsewhere.

**Arguments**

* `url` (optional): The page to load your modal content from.
* `selector` (optional): The id of the div to use for the modal content.
* `id` (optional): Give your modal an identifier if you need to manually call `closeModal()` later in the cycle.
* `size`: The size of the modal. Defaults to `md`
  * Options: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`

## Trigger a modal from a url

<Tabs>
  <Tab title="view.html.erb">
    ```html theme={null}
    <button class="ui-button" onclick="
      launchModal({ url: '<%= my_path %>'})">
    </button>
    ```
  </Tab>

  <Tab title="my_controller.rb">
    ```ruby theme={null}
    class MyController 
      before_action :renders_in_modal, only: [:my_action]
    end
    ```
  </Tab>
</Tabs>

## Trigger a modal from a div on the page

```html theme={null}
<div id='modal-content' hidden> Content in Here </div>
<button class="ui-button" onclick="
  launchModal({ selector: '#modal-content'})">
</button>
```