Modal

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Examples

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <v-button pill @click="showModal = true">Open</v-button>
  <Teleport to="body">
    <v-modal
      size="md"
      :show="showModal"
      title="Lorem ipsum"
      @onDismissed="showModal = false"
    >
      <template #body>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">Lorem ipsum</div>
      </template>
    </v-modal>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

Size

You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.

xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl

The default value is: 2xl

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <v-button @click="size1 = true">SM Modal</v-button>
  <v-button @click="size2 = true">MD Modal</v-button>
  <v-button @click="size3 = true">XL Modal</v-button>
  <v-button @click="size4 = true">5XL Modal</v-button>
  <Teleport to="body">
    <v-modal
      size="sm"
      :show="size1"
      title="Lorem ipsum"
      @onDismissed="size1 = false"
    >
    </v-modal>
  </Teleport>
  <Teleport to="body">
    <v-modal
      size="md"
      :show="size2"
      title="Lorem ipsum"
      @onDismissed="size2 = false"
    >
    </v-modal>
  </Teleport>
  <Teleport to="body">
    <v-modal
      size="xl"
      :show="size3"
      title="Lorem ipsum"
      @onDismissed="size3 = false"
    >
    </v-modal>
  </Teleport>
  <Teleport to="body">
    <v-modal
      size="5xl"
      :show="size4"
      title="Lorem ipsum"
      @onDismissed="size4 = false"
    >
    </v-modal>
  </Teleport>
</template>

<script>
export default {
  data() {
    return {
      size1: false,
      size2: false,
      size3: false,
      size4: false,
    };
  },
};
</script>