@inkline/inkline/components/IModal/examples/size-variants.demo.html

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

<i-button @click="sm = true"> Show Small Modal </i-button>

<i-modal v-model="sm" size="sm">
    <template #header> Small Modal </template>
    This is the modal body. Useful information goes here.
    <template #footer> Modal Footer </template>
</i-modal>

<i-button @click="md = true"> Show Medium Modal </i-button>

<i-modal v-model="md" size="md">
    <template #header> Medium Modal </template>
    This is the modal body. Useful information goes here.
    <template #footer> Modal Footer </template>
</i-modal>

<i-button @click="lg = true"> Show Large Modal </i-button>

<i-modal v-model="lg" size="lg">
    <template #header> Large Modal </template>
    This is the modal body. Useful information goes here.
    <template #footer> Modal Footer </template>
</i-modal>