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

Inkline is the Vue.js UI/UX Library built for creating your next design system

<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>