@inkline/inkline/components/IModal/examples/color-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 color="primary" @click="primary = true"> Show Primary Modal </i-button>

<i-modal color="primary" v-model="primary">
    <template #header> Primary Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="secondary" @click="secondary = true"> Show Secondary Modal </i-button>

<i-modal color="secondary" v-model="secondary">
    <template #header> Secondary Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="light" @click="light = true"> Show Light Modal </i-button>

<i-modal color="light" v-model="light">
    <template #header> Light Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="dark" @click="dark = true"> Show Dark Modal </i-button>

<i-modal color="dark" v-model="dark">
    <template #header> Dark Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="info" @click="info = true"> Show Info Modal </i-button>

<i-modal color="info" v-model="info">
    <template #header> Info Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-info" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="success" @click="success = true"> Show Success Modal </i-button>

<i-modal color="success" v-model="success">
    <template #header> Success Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="warning" @click="warning = true"> Show Warning Modal </i-button>

<i-modal color="warning" v-model="warning">
    <template #header> Warning Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-warning" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>

<i-button color="danger" @click="danger = true"> Show Danger Modal </i-button>

<i-modal color="danger" v-model="danger">
    <template #header> Danger Modal </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-danger" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer> Modal Footer </template>
</i-modal>