@inkline/inkline/components/IModal/examples/color-variants.html

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

<i-button color="primary" @click="visible = true">
    Show Primary Modal
</i-button>

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

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

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

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

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

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

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

<i-modal color="danger" v-model="visible">
    <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>