Small Modals

Set up

Import SmallModal, ModalButton, modalIdStor components and set variables in the script tag. Add `closeModal` method if you want to close the modal in a button.

<script>
  import { SmallModal, ModalButton } from "flowbite-svelte";
  import { goto } from "$app/navigation";

  // for basic
  const idBasic = "basic-modal";
  const btnBasicName = "Basic Modal";

  // for small modal 1
  const btnName1 = "Small Modal";
  const id1 = "small-modal";
  const btnColor1 = "purple";
  let smallModal1;

  const handlebtnS1 = () => {
    goto("/");
  };

  const handlebtnS2 = () => {
    smallModal1.closeModal()
  };

  // for small modal 2
  const btnName2 = "Small Modal 2";
  const id2 = "small-modal-2";
  const btnColor2 = "red";
  let smallModal2;

  const handlebtnS3 = () => {
    goto("/");
  };

  const handlebtnS4 = () => {
    smallModal2.closeModal()
  };
</script>

Examples

Create a button and modal.

<ModalButton id={idBasic} btnName={btnBasicName} />
<SmallModal
  id={idBasic}
  title="Basic Modal Title">
  Basic Modal Content
</SmallModal>

Small modal with action buttons

<ModalButton id={id2} btnName={btnName2} btnColor={btnColor2} />
<SmallModal
  bind:this={smallModal1}
  id={id1}
  btnColor="pink"
  title="Small Modal Title"
  btn1="Go home"
  btn2="Close"
  on:handlebtn1={handlebtnS1}
  on:handlebtn2={handlebtnS2}
>
  Modal 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</SmallModal>

Small modal with different colors

<ModalButton id={id2} btnName={btnName2} btnColor={btnColor2} />
<SmallModal
  bind:this={smallModal2}
  id={id2}
  btnColor="yellow"
  title="Small Modal Title"
  btn1="Go home"
  btn2="Close"
  on:handlebtn1={handlebtnS3}
  on:handlebtn2={handlebtnS4}
>
  Modal 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</SmallModal>

Props

The component has the following props, type, and default values:

type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink';
let id = 'small-modal';
let btnColor: Colors = 'blue';
let textColor: Colors = 'gray';
let title = 'Terms of Service';
let btn1: string;
let btn2: string;
const closeModal = () => {
  modalIdStore.update((value) => (value = null));
};

To close a modal, use `closeModal` function in your event handler.

<script>
//...
let smallModal; // create a variable
const handlebtnS2 = () => {
  smallModal1.closeModal() // calling closeModal function
};
</script>

<SmallModal
  bind:this={smallModal1} // bind using the variable
  id={id1}
  btnColor="pink"
  title="Small Modal Title"
  btn1="Go home"
  btn2="Close"
  on:handlebtn1={handlebtnS1}
  on:handlebtn2={handlebtnS2}
>

Props

The component has the following props, type, and default values. See types page for type information.

ModalButton

SmallModal

Related components

References