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

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

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

<i-modal v-model="visible" 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="visible = true">
    Show Medium Modal
</i-button>

<i-modal v-model="visible" 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="visible = true">
    Show Large Modal
</i-button>

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