Modal Component

Modals are a very important part of modern dynamic applications. They can help displaying additional info. Explore Vulk modals.

Components Open Docs

Modal Small Medium Large Big

Modal

Modal base variation


<script setup lang="ts">
const modalBaseOpen = ref(false)
</script>

<template>
  <!--Modal trigger-->
  <Button bold @click="modalBaseOpen = true">Open Modal</Button>

  <!--Modal-->
  <Modal
    title="Premium features"
    :open="modalBaseOpen"
    actions="center"
    noscroll
    @close="modalBaseOpen = false"
  >
    <template #content>
      <PlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      >
        <template #image>
          <DarkImage
            src="/@src/assets/illustrations/features/vr.svg"
            src-dark="/@src/assets/illustrations/features/vr-dark.svg"
            alt="dark image"
          />
        </template>
      </PlaceholderSection>
    </template>
    <template #action>
      <Button color="primary" :long="2" raised>Confirm</Button>
    </template>
  </Modal>
</template>

Modal

Modal small variation


<script setup lang="ts">
const modalSmallOpen = ref(false)
</script>

<template>
  <!--Modal trigger-->
  <Button bold @click="modalSmallOpen = true">Open Modal</Button>

  <!--Modal-->
  <Modal
    title="Small Modal"
    :open="modalSmallOpen"
    size="small"
    actions="center"
    noscroll
    @close="modalSmallOpen = false"
  >
    <template #content>
      <PlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      >
        <template #image>
          <DarkImage
            src="/@src/assets/illustrations/features/vr.svg"
            src-dark="/@src/assets/illustrations/features/vr-dark.svg"
            alt="dark image"
          />
        </template>
      </PlaceholderSection>
    </template>
    <template #action>
      <Button color="primary" :long="2" raised>Confirm</Button>
    </template>
  </Modal>
</template>

Modal

Modal medium variation


<script setup lang="ts">
const modalMediumOpen = ref(false)
</script>

<template>
  <!--Modal trigger-->
  <Button bold @click="modalMediumOpen = true">Open Modal</Button>

  <!--Modal-->
  <Modal
    title="Medium Modal"
    :open="modalMediumOpen"
    size="medium"
    actions="center"
    noscroll
    @close="modalMediumOpen = false"
  >
    <template #content>
      <PlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      >
        <template #image>
          <DarkImage
            src="/@src/assets/illustrations/features/vr.svg"
            src-dark="/@src/assets/illustrations/features/vr-dark.svg"
            alt="dark image"
          />
        </template>
      </PlaceholderSection>
    </template>
    <template #action>
      <Button color="primary" :long="2" raised>Confirm</Button>
    </template>
  </Modal>
</template>

Modal

Modal large variation


<script setup lang="ts">
const modalLargeOpen = ref(false)
</script>

<template>
  <!--Modal trigger-->
  <Button bold @click="modalLargeOpen = true">Open Large Modal</Button>

  <!--Modal-->
  <Modal
    title="Large Modal"
    :open="modalLargeOpen"
    size="large"
    actions="center"
    noscroll
    @close="modalLargeOpen = false"
  >
    <template #content>
      <PlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      >
        <template #image>
          <DarkImage
            src="/@src/assets/illustrations/features/vr.svg"
            src-dark="/@src/assets/illustrations/features/vr-dark.svg"
            alt="dark image"
          />
        </template>
      </PlaceholderSection>
    </template>
    <template #action>
      <Button color="primary" :long="2" raised>Confirm</Button>
    </template>
  </Modal>
</template>

Modal

Modal big variation


<script setup lang="ts">
const modalBigOpen = ref(false)
</script>

<template>
  <!--Modal trigger-->
  <Button bold @click="modalBigOpen = true">Open Large Modal</Button>

  <!--Modal-->
  <Modal
    title="Big Modal"
    :open="modalBigOpen"
    size="big"
    actions="center"
    noscroll
    @close="modalBigOpen = false"
  >
    <template #content>
      <PlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      >
        <template #image>
          <DarkImage
            src="/@src/assets/illustrations/features/vr.svg"
            src-dark="/@src/assets/illustrations/features/vr-dark.svg"
            alt="dark image"
          />
        </template>
      </PlaceholderSection>
    </template>
    <template #action>
      <Button color="primary" :long="2" raised>Confirm</Button>
    </template>
  </Modal>
</template>