AisModal

Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sizes, variants, and more.

The content of an AisModal is an AisCard. Like the card, there is no header or footer by default, just the body. Use the header and/or footer props or slots to create a header and/or footer.

Basic

A basic modal using only the body of the underlying card. Notice how the triggering button activates the keep-focus property. This allows the modal to return focus to the trigger when it is closed. If the original button blurs and loses focus, focus will be reset to the top of the page when the modal closes.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        size="sm"
        title="Payment successful"
        class="bg-white text-center"
        modal-desc="This is your modal description!!"
    >

      <div class="flex flex-col gap-5">
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-success rounded-full">
          <AisIcon icon="confirm" class="text-lg text-white"/>
        </div>

        <h3 class="mt-0">Payment successful</h3>

        <div class="text-gray-500">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste
          dolorem animi vitae error totam. At sapiente aliquam accusamus facere veritatis.
        </div>

        <div class="mt-3">
          <AisButton block hover press fast rounded
                     variant="secondary"
                     size="md"
                     icon="confirm"
                     @click="open=false"
          >Got it, thanks!</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)
</script>

Header & Footer

The modal has logic built-in to handle a header-level icon. This icon can be used via the icon prop or by using the icon slot.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        header="Deactivate Account"
        header-class="text-xl font-bold"
        descr="This is your modal description!!"
        footer="This action cannot be undone."
        footer-class="text-base font-bold"
        class="rounded"
    >

      <div class="grid gap-4">
        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever. This action cannot be undone.
        </div>

        <div class="flex gap-4 justify-end items-center">
          <AisButton hover press fast outline rounded
                     variant="default"
                     size="sm"
                     icon="cancel"
                     @click="open=false"
          >Cancel</AisButton>

          <AisButton hover press fast rounded
                     variant="danger"
                     size="sm"
                     icon="confirm"
                     @click="open=false"
          >Deactivate</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';

    const open = ref(false)

</script>

Props

Use icon and status props to easily customize your card header. Likewise, you can use footer-icon and footer-status to easily customize your card footer. You can also use icon-class, status-class, footer-icon-class, footer-status-class to further customize your styles. modal.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        descr="This is your modal description!!"
        header="Deactivate Account"
        header-class="text-xl font-bold"
        icon="user"
        icon-class="text-purple-500"
        status="busy"
        status-class="text-orange-500"
        footer="This action cannot be undone!"
        footer-class="font-bold text-danger"
        footer-icon="info"
        footer-icon-class="animate-pulse"
        footer-status="busy"
        footer-status-class="text-blue-500"
    >
      <div class="grid gap-4">
        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever.
        </div>

        <div class="flex gap-4 justify-end items-center">
          <AisButton hover press fast outline rounded
                     variant="default"
                     size="sm"
                     icon="cancel"
                     @click="open=false"
          >Cancel</AisButton>

          <AisButton hover press fast rounded
                     variant="danger"
                     size="sm"
                     icon="confirm"
                     @click="open=false"
          >Deactivate</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';

    const open = ref(false)

</script>

Slots

For custom content use the header and/or footer slots.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        title="Deactivate Account"
        descr="This is your modal description!!"
        class="rounded"
    >
      <template #header>
        <div class="flex gap-4 items-center">
          <AisIcon icon="user"/>
          <h3 class="mt-0 text-danger">Deactivate Account</h3>
        </div>
      </template>

      <template #footer>
        <div class="flex gap-4 justify-end items-center">
          <AisButton hover press fast outline rounded
                     variant="default"
                     size="sm"
                     icon="cancel"
                     @click="open=false"
          >Cancel</AisButton>

          <AisButton hover press fast rounded
                     variant="danger"
                     size="sm"
                     icon="confirm"
                     @click="open=false"
          >Deactivate</AisButton>
        </div>
      </template>

      <div class="grid gap-4">
        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever. This action cannot be undone.
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)

</script>

Or just customize the right side of the header and/or footer with the headerRight and/or footerRight slots.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        descr="This is your modal description!!"
        header="Deactivate Account"
        header-class="text-xl font-bold"
        footer="This action cannot be undone"
    >
      <template #headerRight>
        <AisIcon icon="error"/>
      </template>

      <template #footerRight>
        <div class="flex gap-4 justify-end items-center">
          <AisButton hover press fast outline rounded
                     variant="default"
                     size="sm"
                     icon="cancel"
                     @click="open=false"
          >Cancel</AisButton>

          <AisButton hover press fast rounded
                     variant="danger"
                     size="sm"
                     icon="confirm"
                     @click="open=false"
          >Deactivate</AisButton>
        </div>
      </template>

      <div class="grid gap-4">


        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever. This action cannot be undone.
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)

</script>

Variants

Use the variant prop to change the look of your modal. The accepted values are: default, primary, secondary, info, success, warning, danger, plain.

<template>
  <div>

    <div class="grid gap-8">
      <div>
        <AisButton
          variant="secondary"
          @click="open=true"
          keep-focus
        >
          Open Modal
        </AisButton>

      </div>
    </div>

    <AisModal
        v-model="open"
        descr="This is your modal description!!"
        rounded
        header="Deactivate Account"
        header-class="text-xl font-bold"
        :variant="selectedOption"
    >

      <div class="grid gap-4">
        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever.
        </div>

        <AisField label="Variant:">
          <AisSelect v-model="selectedOption" size="sm" :options="options"/>
        </AisField>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
  import { AisSelect } from '@ais-public/ais-components';

  const open = ref(false)
  const selectedOption = ref('default')
  const options = ref(['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'plain'])
</script>

Sizes

The size prop controls the modal size. The accepted values are: sm, md, lg, and xl. The default value is md.

<template>
  <div>

    <div class="grid gap-8">
      <div>
        <AisButton
          variant="secondary"
          @click="open=true"
          keep-focus
        >
          Open Modal
        </AisButton>
      </div>
    </div>

    <AisModal
        v-model="open"
        :size="size"
        title="Payment successful"
        title-class="sr-only"
        class="bg-white text-center"
        modal-desc="This is your modal description!!"
    >

      <div class="flex flex-col">
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-success rounded-full mb-5">
          <AisIcon icon="confirm" class="text-lg text-white"/>
        </div>
        <div class="w-full grid gap-5">
          <h3 class="mt-0">Payment successful</h3>
          <div class="text-gray-500">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam laudantium explicabo pariatur iste
            dolorem animi vitae error totam. At sapiente aliquam accusamus facere veritatis.
          </div>
          <div>
            <AisRadioGroup
                v-model="size"
                :options="sizes"
                name="modalSizes"
                rounded buttons outline
            />
          </div>

          <div class="mt-3">
            <AisButton block hover press fast
                       variant="secondary"
                       size="md"
                       icon="confirm"
                       @click="open=false"
            >Got it, thanks!</AisButton>
          </div>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisIcon } from '@ais-public/ais-components';
  import { AisRadioGroup } from '@ais-public/ais-components';

  const open = ref(false)
  const size = ref('md')
  const sizes = ref([
      { value: 'sm', label: 'Small' },
      { value: 'md', label: 'Medium' },
      { value: 'lg', label: 'Large' },
      { value: 'xl', label: 'X-Large' },

  ])
</script>

Rounded

Use the rounded prop to specify the border radius for the modal. The accepted values are: true, false, sm, rounded, md, lg, xl, 2xl, 3xl, and full. The default is 2xl.

<template>
  <div>

    <div class="grid gap-8">
      <div>
        <AisButton
          variant="secondary"
          @click="open=true"
          keep-focus
        >
          Open Modal
        </AisButton>
      </div>
    </div>

    <AisModal
        v-model="open"
        descr="This is your modal description!!"
        header="Deactivate Account"
        header-class="text-xl font-bold"
        icon="error"
        footer="This action cannot be undone!"
        footer-class="font-bold text-danger"
        :rounded="selectedOption"
    >
      <div class="grid gap-4">
        <div class="text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever.
        </div>

        <AisField label="Rounded:">
          <AisSelect v-model="selectedOption" size="sm" :options="options"/>
        </AisField>

        <div class="flex gap-4 justify-end items-center">
          <AisButton hover press fast outline rounded
                     variant="default"
                     size="sm"
                     icon="cancel"
                     @click="open=false"
          >Cancel</AisButton>

          <AisButton hover press fast rounded
                     variant="danger"
                     size="sm"
                     icon="confirm"
                     @click="open=false"
          >Deactivate</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
  import { AisSelect } from '@ais-public/ais-components';

  const open = ref(false)
  const selectedOption = ref('md')
  const options = ref([
    { value: 'none', label: 'rounded-none' },
    { value: 'sm', label: 'rounded-sm' },
    { value: 'rounded', label: 'rounded' },
    { value: 'md', label: 'rounded-md' },
    { value: 'lg', label: 'rounded-lg' },
    { value: 'xl', label: 'rounded-xl' },
    { value: '2xl', label: 'rounded-2xl' },
    { value: '3xl', label: 'rounded-3xl' },
    { value: 'full', label: 'rounded-full' },
  ])
</script>

Custom Styles

You can control the styles of the modal via a few of the props. The class prop adds the passed-in classes to the modal container. The title-class prop adds the passed-in classes to the modal title. The dismiss-class adds the passed-in classes to the dismiss icon.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        title="Payment Successful"
        descr="This is your modal description"
        size="sm"
        class="bg-[inherit]"
        body-class="bg-secondary text-center"
        dismiss-class="text-primary"
    >

      <div class="grid gap-4">
        <h3 class="mt-0 text-primary">Payment Successful</h3>

        <div class="text-ui-gray-100">
          Your payment has been successfully submitted. We’ve sent you
          an email with all of the details of your order.
        </div>

        <div class="mt-4">
          <AisButton block hover press fast rounded="lg"
                     variant="primary"
                     size="md"
                     icon="confirm"
                     @click="open=false"
          >Got it, thanks!</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';

  const open = ref(false)
</script>

dismissible

dismissible is a Boolean prop with a default value of true. When true, AisModal can be dismissed/closed. To prevent the modal from closing, use :dismissible="false". You can still dismiss the modal by setting the v-model of the modal to false.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal v-model="open"
              size="sm"
              title="Payment successful"
              class="bg-white text-center"
              :dismissible="false"
              rounded="xl"
    >

      <div class="flex flex-col gap-5">
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-warning rounded-full">
          <AisIcon icon="danger" class="text-2xl text-white"/>
        </div>

        <h3 class="mt-0">Site Down Due to Maintenance</h3>

        <div class="text-gray-500">
          Notice how this modal doesn't close.
        </div>

        <div class="mt-3">
          <AisButton block hover press fast rounded
                     variant="secondary"
                     size="md"
                     icon="confirm"
                     @click="open=false"
          >Got it, thanks!</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)
</script>

click-away

click-away is a Boolean prop with a default value of true. When true, AisModal will close when a click event is triggered outside of the modal. To prevent the modal from closing when a click event is triggered outside of the modal, use :click-away="false".

Clicking the dismiss button and pressing esc will still close the modal.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal v-model="open"
              size="sm"
              title="Payment successful"
              class="bg-white text-center"
              :click-away="false"
    >

      <div class="flex flex-col gap-5">
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-success rounded-full">
          <AisIcon icon="confirm" class="text-lg text-white"/>
        </div>

        <h3 class="mt-0">Payment successful</h3>

        <div class="text-gray-500">
          Notice how this modal doesn't close when you click outside of the modal.
        </div>

        <div class="mt-3">
          <AisButton block hover press fast rounded
                     variant="secondary"
                     size="md"
                     icon="confirm"
                     @click="open=false"
          >Got it, thanks!</AisButton>
        </div>
      </div>

    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)
</script>

Notice: AisModal is configured to ignore a click-away on any element with the class .ais-ignore-click-away. You can use AisModal's clickAwayOptions prop to customize the click-away behavior, and the example below shows how to configure the default behavior. See VueUse's useClickAway for details on the available options.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal v-model="open"
              size="sm"
              title="Payment successful"
              class="bg-white text-center"
              :click-away="true"
              :click-away-options="{ ignore: ['.ais-ignore-click-away'] }"
    >

      <div class="flex flex-col gap-5">
        <div class="mx-auto flex items-center justify-center h-12 w-12 bg-success rounded-full">
          <AisIcon icon="confirm" class="text-lg text-white"/>
        </div>

        <h3 class="mt-0">Payment successful</h3>

        <div class="text-gray-500">
          Notice how this modal doesn't close when you click "Click away doesn't affect me"
        </div>

        <div class="mt-3">
          <AisButton block hover press fast rounded
                     variant="secondary"
                     size="md"
                     icon="confirm"
                     @click="open=false"
          >Got it, thanks!</AisButton>
        </div>
      </div>

    </AisModal>

    <AisButton
        style="position:fixed;bottom: 10px; right: 210px; z-index: 51"
        class="ais-ignore-click-away mt-3"
        v-if="open"
        variant="warning"
        @click="() => {}"
    >
      Click me! (see modal doesn't close, but click elsewhere outside modal and it will close)
    </AisButton>

  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';
    import { AisIcon } from '@ais-public/ais-components';

    const open = ref(false)
</script>

no-body

AisModal is built with AisCard, so you can add the no-body boolean prop for the same results. This can be useful with tables and list groups, for example.

Table

Nested AisTable, similar to the "Nested Table" Example in AisCard

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal v-model="open"
              no-body
              header="Team Roster"
              icon="users"
              header-class="font-bold"
              footer="Full-time staff only"
              footer-icon="info"
              footer-class="text-blue-600"
    >
      <div class="block w-full overflow-y-auto max-h-[500px]">
        <AisTable flush bordered sticky-headers
                  :fields="fields"
                  :items="items"
        ></AisTable>
      </div>
    </AisModal>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisTable } from '@ais-public/ais-components';
  import { defaultItems, defaultFields } from '@/components/table/examples/table-data.js'

  const fields = ref(defaultFields)
  const items = ref(defaultItems)

  const open = ref(false)
</script>

List Group

Nested AisListGroup, similar to the "Inside AisCard" Example in AisListGroup

<template>
  <div class="flex gap-20 items-center">
    <div>
      <AisButton variant="primary" @click="open=true" keep-focus>Modal with no-body and a flush AisListGroup</AisButton>

      <AisModal v-model="open"
                no-body
                header="Modal with no-body and a flush list group"
      >
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
          <AisListGroupItem>List Group Item #5</AisListGroupItem>
        </AisListGroup>
      </AisModal>
    </div>

    <div>
      <AisButton variant="primary" @click="open2=true" keep-focus>Modal with no-body, a flush AisListGroup, and an AisCardBody</AisButton>

      <AisModal v-model="open2"
                no-body
                header="Modal with no-body, a flush AisListGroup, and an AisCardBody"
      >
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
          <AisListGroupItem>List Group Item #5</AisListGroupItem>
        </AisListGroup>

        <AisCardBody>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim
          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit
          ipsum anim Lorem.
        </AisCardBody>

      </AisModal>
    </div>
</div>
</template>

<script setup>
  import { ref } from 'vue'
  import { AisModal } from '@ais-public/ais-components';
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import { AisCardBody } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';

  const open = ref(false)
  const open2 = ref(false)
</script>

Events

The modal emits four events:

• show emits just before the modal is shown.
• shown emits immediately after the modal is shown.
• hide emits just before the modal is hidden.
• hidden emits immediately after the modal is hidden.

<template>
  <div>
    <AisButton
      variant="secondary"
      @click="open=true"
      keep-focus
    >
      Open Modal
    </AisButton>

    <AisModal
        v-model="open"
        title="Deactivate Account"
        descr="This is your modal description!!"
        @show="handleShow"
        @shown="handleShown"
        @hide="handleHide"
        @hidden="handleHidden"
    >
      <div class="grid gap-6 mt-2">
        <div class="my-2 text-gray-500">
          Are you sure you want to deactivate your account? All of your data will be permanently removed from our
          servers forever. This action cannot be undone.
        </div>

        <div class="flex flex-row-reverse gap-4">
          <AisButton hover press fast
                     variant="danger"
                     size="md"
                     icon="confirm"
                     class="rounded-md"
                     @click="open=false"
          >Deactivate</AisButton>

          <AisButton hover press fast outline
                     variant="default"
                     size="md"
                     icon="cancel"
                     class="rounded-md"
                     @click="open=false"
          >Cancel</AisButton>
        </div>
      </div>
    </AisModal>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { AisModal } from '@ais-public/ais-components';
    import { AisButton } from '@ais-public/ais-components';

    const open = ref(false)

    const handleShow = (e) => {
        console.log(`handleShow: e=` + e)
        alert('SHOW')
    }
    const handleShown = (e) => {
        console.log(`handleShown: e=` + e)
        alert('SHOWN')
    }
    const handleHide = (e) => {
        console.log(`handleHide: e=` + e)
        alert('HIDE')
    }
    const handleHidden = (e) => {
        console.log(`handleHidden: e=` + e)
        alert('HIDDEN')
    }
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
class	Array, String		'bg-white'	CSS classes for modal body	false
clickAway	Boolean		true	When true, the modal closes when a click event happens outside of the modal	false
clickAwayOptions	Object		{ ignore: ['.ais-ignore-click-away'] }	Options to configure click-away behavior. This object will be passed to VueUses' onClickOutside function. See useClickAway for details.	false
descr	String		''	Text for the aria-describedby for the modal	false
dismissButton	Boolean		true	When true, the close button is displayed in the upper right corner of the header (or body, if no header)	false
dismissClass	Array, String		[]	Class(es) applied to the dismiss button	false
dismissible	Boolean		true	When true, the modal can be closed. When false, the modal will stay open and the dismiss button (if visible) will be hidden	false
enter	Array, String		''	Classes to add to the transitioning element during the entire enter phase.	false
enterFrom	Array, String		''	Classes to add to the transitioning element before the enter phase starts.	false
enterTo	Array, String		''	Classes to add to the transitioning element immediately after the enter phase starts.	false
entered	Array, String		''	Classes to add to the transitioning element once the transition is done. These classes will persist after that, until it's time to leave.	false
header	String		''	The title of the modal	false
headerClass	Array, Object, String		undefined	Classes to be applied to the modal header	false
leave	Array, String		''	Classes to add to the transitioning element during the entire leave phase.	false
leaveFrom	Array, String		''	Classes to add to the transitioning element before the leave phase starts.	false
leaveTo	Array, String		''	Classes to add to the transitioning element immediately after the leave phase starts.	false
modelValue	Boolean		false	Controls whether the modal is shown/visible	false
rounded	Boolean, String		undefined	Applies rounded corners using TailwindCSS's rounded classes	false
size	String		'md'	Set the size of the modal's width. Valid values: sm, md, lg, or xl	false
title	String			Text content to place in the title	false

Slots

Name	Scoped	Description
default	No	Slot for custom rendering the content of the modal
footer	No	Slot for custom rendering the modal footer
footerRight	No	Slot for custom rendering the right side of the modal footer. Note: this slot will be ignored if the footer slot is used
header	No	Slot for custom rendering the modal header
headerRight	No	Slot for custom rendering the right side of the modal header. Note: this slot will be ignored if the header slot is used

Events

Event	Arguments	Description
hidden	event object - Native event object	Emitted immediately after the modal is hidden
hide	event object - Native event object	Emitted immediately before the modal is hidden
show	event object - Native event object	Emitted immediately before the modal is shown
shown	event object - Native event object	Emitted immediately after the modal is shown
update:modelValue	open boolean - The open state of the modal (whether the modal is being shown or not)	Emitted when the modal is shown or hidden