Modal

A Modal is basically a card that will sit on top of all content. It should only be used for actions that to user needs to take right now, generally for a delete confirmation or something or urgent importance.

Modals are set programmatically in Bubbles. Add the Modal component to your __layout.svelte file as shown here and then use the helper function showModal to bring up the modal. The showModal function will add the required components to a the modalStore. You can also programmatically hide the modal using the hideModal function.

The modalStore is a svelte store that controls the modal. You can edit it directly if you wish to manipulate the modal, but the showModal helper is designed to do that for you.

Generally, your modal will display a form or a message to the user with some buttons.

Props

Since you are not using the Modal component directly and instead the showModal function, the props shown are for that.

title string
The title of the modal

options object
The rest of the modal options are optional, but it's obviously wise to include at least one.

options.height number
The height in vh values that you want the modal to be.

options.img string
The path to an image to display at the top of the modal. Good to use then there is not a lot of content in the modal.

options.message string
The message you want the modal to display if any. Usually a description of what the modal is asking from them.

options.form Array<Input>
This lets you pass a whole form input into the modal if you want to collect data from the user in a modal.

options.footer Array<Button>
You may want to add buttons to your modal that will be locked to the bottom of your modal. You can add an array of buttons here. If you have also included a form, you can choose to have the buttons (like the submit button) in the form array, or you can add the submit button in the footer.

<script>
  // Add the modal component to your root layout component
  //__layout.svelte
  //<Modal />;

  import { Button, Modal, showModal, hideModal } from "bubbles-ui";
</script>

<Button
  label="Message Modal"
  wide={true}
  mb={true}
  onclick={() =>
    showModal("Message Modal", {
      img: "/favicon.png",
      message: "This is a message modal. Good for things like confirming an un-doable action for the user",
      footer: [
        {
          label: "Close Modal",
          color: "gray-light",
          onclick: () => {
            hideModal();
          },
        },
      ],
    })}
/>

<Button
  label="Form Modal"
  wide={true}
  mb={true}
  onclick={() =>
    showModal("Form Modal", {
      message:
        "This is a form modal. It can have a message option too! Just add Form details just like you would with any other form. You can include the submit buttons in the form, which will cause them to not be locked at the bottom. Or you can include the submit buttons in the footer, which will cause the buttons to be sticky at the bottom of the modal.",
      form: [
        {
          type: "text",
          id: "name",
          label: "Name",
          error: "An error occurred",
          vob: "true",
          validation: "required|string",
        },
        {
          type: "button",
          label: "Submit",
          onsubmit: () => {
            hideModal();
          },
        },
      ],
    })}
/>

Modal

Props

Modal Demos