oa/documentation/modal/v-modal-sizes-documentation.md

Modal Sizes

The <VModal /> component can have different sizes. use the size true prop to change the modal size. Available sizes are: small, default, medium, large and big.

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

<template>
  <VButton bold @click="centeredActionsOpen = true">
    Open Modal
  </VButton>

  <VModal
    :open="centeredActionsOpen"
    size="small"
    actions="center"
    @close="centeredActionsOpen = false"
  >
    <template #content>
      <VPlaceholderSection
        title="Go Premium"
        subtitle="Unlock more features and business tools by going premium"
      />
    </template>
    <template #action>
      <VButton color="primary" raised>
        Confirm
      </VButton>
    </template>
  </VModal>
</template>