Free Astro Components

The Modal component provides a flexible way to display content in a dialog. It supports various sizes and customizable content through its child components.

Import

To use the Modal component, first import it into your project:

---
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components'
---

Usage

To use the Modal, you need to pass an id to the component and include the data-modal-trigger attribute with the same id in the trigger element (e.g., a Button).

Basic Usage

---
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components'
---

<Button label="Open Modal" data-modal-trigger="modal-id" />

<Modal id="modal-id">
  <ModalHeader>
    <h4>Modal Title</h4>
  </ModalHeader>
  <ModalBody>
    <p>
      This is the modal body. You can add any content here.
    </p>
  </ModalBody>
  <ModalFooter>
    <Button label="Close" data-modal-close />
  </ModalFooter>
</Modal>

Programmatic Control

You can control the modal programmatically using the openModal and closeModal functions. Below is an example that combines both:

Example: Open Modal on Form Submit and Close Automatically

This example demonstrates how to open a modal programmatically when a form is submitted and then automatically close it after a few seconds.

---
import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'free-astro-components'
---

<form id="example-form">
  <Input label="Name" placeholder="Enter your name" required />
  <Button type="submit" label="Submit" />
</form>

<Modal id="modal-example">
  <ModalHeader>
    <h3>Form Submitted Successfully</h3>
  </ModalHeader>
  <ModalBody>
    <p>Thank you for submitting the form. This modal will close automatically after a few seconds.</p>
  </ModalBody>
  <ModalFooter>
    <Button label="Close now" data-modal-close>
  </ModalFooter>
</Modal>

<script>
  import { openModal, closeModal } from 'free-astro-components';

  const form = document.querySelector('#example-form');
  const modal = document.querySelector('#modal-example');

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    openModal(modal);

    setTimeout(() => {
      closeModal(modal)
    }, 3000);
  });
</script>

Sizes

---
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components'

const modalSizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full']
---

{
  modalSizes.map((size) => (
    <Button
      label={'Open' + size}
      data-modal-trigger={'modal-' + size}
    />
  ))
}

{
  modalSizes.map((size) => (
    <Modal id={'modal-' + size} size={size}>
      <ModalHeader>
        <Heading level={4} text={'Modal ' + size} />
      </ModalHeader>
      <ModalBody>
        <Text>
          This is the modal body. You can add any content here.
        </Text>
      </ModalBody>
      <ModalFooter>
        <Button label="Close" data-modal-close />
      </ModalFooter>
    </Modal>
  ))
}

Overflow scroll

The ModalBody component is prepared to handle long content. It includes an overflow scroll to ensure that content can be scrolled within the modal if it exceeds the available space.

---
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components'
---

<Button label="Open Modal" data-modal-trigger="modal-overflow" />

<Modal id="modal-overflow">
  <ModalHeader>
    <h4>Modal Overflow</h4>
  </ModalHeader>
  <ModalBody>
    {
      Array.from({ length: 10 }).map((_) => (
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Obcaecati tenetur voluptatibus vero similique
          alias ab odio commodi sint maiores facere voluptate
          nostrum atque magni, delectus perferendis laborum
          minima saepe asperiores.
        </p>
      ))
    }
  </ModalBody>
  <ModalFooter>
    <Button label="Close" data-modal-close />
  </ModalFooter>
</Modal>

Custom Styles

The Modal component includes several customizable CSS variables, allowing you to tailor its appearance to fit your design needs:

Available Variables

--ac-modal-backdrop-color
--ac-modal-backdrop-filter
--ac-modal-background-color
--ac-modal-border-radius
--ac-modal-width-xs
--ac-modal-width-sm
--ac-modal-width-md
--ac-modal-width-lg
--ac-modal-width-xl
--ac-modal-width-2xl
--ac-modal-width-3xl
--ac-modal-width-4xl

Example Customization

To customize the Modal styles, you can override these variables in your CSS:

---
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components'
---

<Button label="Open Modal" data-modal-trigger="modal-custom" />

<Modal id="modal-custom" class="custom-modal">
  <ModalHeader>
    <h4>Custom Modal</h4>
  </ModalHeader>
  <ModalBody>
    <p>
      This is the modal body. You can add any content here.
    </p>
  </ModalBody>
  <ModalFooter>
    <Button label="Close" data-modal-close />
  </ModalFooter>
</Modal>

<style>
  .custom-modal {
    --ac-modal-border-radius: 0;
    --ac-modal-backdrop-filter: grayscale(100%);
  }
</style>

Props

Modal

Attribute	Type	Description	Default
id	`string`	The unique identifier for the modal.	-
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| 'full'`	The size of the modal.	`md`
children	`ModalHeader \| ModalBody \| ModalFooter \| [ModalHeader, ModalBody, ModalFooter]`	The content of the modal, including `ModalHeader`, `ModalBody`, and `ModalFooter` components.	-
class	`string`	CSS class for custom styling.	-

ModalHeader

Attribute	Type	Description	Default
children	`any`	The content of the header. Typically includes a title.	-
class	`string`	CSS class for custom styling.	-

ModalBody

Attribute	Type	Description	Default
children	`any`	The content of the body. Supports scrollable content.	-
class	`string`	CSS class for custom styling.	-

ModalFooter

Attribute	Type	Description	Default
children	`any`	The content of the footer. Typically includes action buttons.	-
class	`string`	CSS class for custom styling.	-

Accessibility

Focus Management: Ensure that focus is trapped within the modal when it is open, and returned to the trigger element when closed.
Keyboard Interactions: Allow users to close the modal with the Esc key and navigate interactive elements within the modal using the Tab key.