Modal
The modal component provides flexible and customizable modals with customizable sizes and colors. The modal component uses a button with an unique id to call the modal with a matching id.
Installation
bash
pnpm i @vue-interface/modalbash
yarn add @vue-interface/modalbash
npm i @vue-interface/modalbash
bun i @vue-interface/modalTailwind Setup
css
@import '@vue-interface/modal/index.css';Basic Usage
html
<Modal
trigger="#basic-modal"
close-button
button-orientation="vertical"
title="Basic Modal"
content="Some Content"
>
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>js
methods: {
onConfirm(button, context) {
console.log('Confirmed!', button, context);
context.close();
}
}TIP
Remove the close-button prop to remove the "x" close button in the top right corner.
Types
There are three modal types: modal, confirm, and alert.
Show Code
html
<Modal
trigger="#default-modal"
close-button
button-orientation="vertical"
title="Some Title"
content="Some Content"
>
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Confirm
trigger="#confirm"
close-button
button-orientation="vertical"
title="Some Title"
@confirm="onConfirm">
Confirm
</Confirm>
<Alert
trigger="#alert"
close-button
button-orientation="vertical"
title="Some Title">
Alert
</Alert>Variants
There are four variants of modals: Info, Warning, Critical, and Success. Each type has a unique color, heroicon, and button layout. Set the type prop value to the desired variant using the syntax: type="[variant]".
Show Code
html
<Modal
trigger="#info"
close-button
type="info"
button-orientation="vertical"
title="Info">
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Confirm
trigger="#warning"
close-button
type="warning"
button-orientation="vertical"
title="Warning"
@confirm="onConfirm">
Some Content
</Confirm>
<Alert
trigger="#critical"
close-button
type="critical"
button-orientation="vertical"
title="Critical">
Some Content
</Alert>
<Modal
trigger="#success"
close-button
type="success"
button-orientation="vertical"
title="Success">
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Centered
Centered modals come in two variations: centerd single action or centered double action. The action keyword specifies the number and layout of the modal buttons. Add class="modal-center" to the list of attributes to create the custom centered modal.
Show Code
html
<Modal
trigger="#centeredSingle"
close-button
class="modal-center"
button-orientation="vertical"
title="Centered Single Action">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Confirm
trigger="#centeredDouble"
close-button
class="modal-center"
button-orientation="vertical"
title="Some Title"
@confirm="onConfirm">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Confirm>Sizes
Customize the size of modal dialogs using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.
Predetermined Sizes
The size can be customized using predetermined size classes: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, screen. Specify the size using the size prop syntax: size="[size]".
Show Code
html
<Modal
trigger="#modal-2xs"
close-button
size="modal-2xs"
button-orientation="vertical"
title="modal-2xs"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-xs"
close-button
size="modal-xs"
button-orientation="vertical"
title="modal-xs"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-sm"
close-button
size="modal-sm"
button-orientation="vertical"
title="modal-sm"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-md"
close-button
size="modal-md"
button-orientation="vertical"
title="modal-md"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-lg"
close-button
size="modal-lg"
button-orientation="vertical"
title="modal-lg"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-xl"
close-button
size="modal-xl"
button-orientation="vertical"
title="modal-xl"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-2xl"
close-button
size="modal-2xl"
button-orientation="vertical"
title="modal-2xl"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-3xl"
close-button
size="modal-3xl"
button-orientation="vertical"
title="modal-3xl"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-4xl"
close-button
size="modal-4xl"
button-orientation="vertical"
title="modal-4xl"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-5xl"
close-button
size="modal-5xl"
button-orientation="vertical"
title="modal-5xl"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-screen"
close-button
size="modal-screen"
button-orientation="vertical"
title="Fullscreen Modal"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Tailwind Sizes
For more granular control over modal sizes, use Tailwind's numeric sizing scale classes: modal-50 - modal-375.
Show Code
html
<Modal
trigger="#modal-125"
close-button
size="modal-125"
button-orientation="vertical"
title="modal-125"
>
500px
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-150"
close-button
size="modal-150"
button-orientation="vertical"
title="modal-150"
>
600px
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-175"
close-button
size="modal-175"
button-orientation="vertical"
title="modal-175"
>
700px
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-200"
close-button
size="modal-200"
button-orientation="vertical"
title="modal-200"
>
800px
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Arbitrary Sizes
For precise sizing, specify exact pixel values using the syntax modal-[Npx] or any other CSS length units (rem, em, %, vw, vh, etc.). You can also use modal-w-[value] and modal-h-[value] for width and height respectively.
Show Code
html
<Modal
trigger="#modal-400px"
close-button
size="modal-[400px]"
button-orientation="vertical"
title="modal-[400px]"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-700px"
close-button
size="modal-[700px]"
button-orientation="vertical"
title="modal-[700px]"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-100"
close-button
size="modal-[100%]"
button-orientation="vertical"
title="modal-[100%]"
>
Some Content
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-w-h"
close-button
size="modal-w-[50vw] modal-max-h-[20vh]"
button-orientation="vertical"
title="modal-w-[50vw] modal-max-h-[20vh]"
>
Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus duis convallis tempus leo eu aenean. Urna tempor pulvinar vivamus fringilla lacus nec metus. Iaculis massa nisl malesuada lacinia integer nunc posuere. Semper vel class aptent penatibus. Dis parturient montes nascetur ridiculus mus donec rhoncus. Nulla molestie mattis scelerisque maximus eget fermentum odio. Purus est efficitur laoreet mauris pharetra vestibulum fusce dictum. Nisi sodales consequat magna ante condimentum neque at. Etiam interdum tortor ligula congue sollicitudin erat viverra. Aenim euismod quam justo lectus commodo augue. Mollis nullam volutpat porttitor ullamcorper rutrum gravida cras. Ornare sagittis vehicula praesent dui felis venenatis ultrices.
<template #buttons="{ close }">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Colors
Customize the color of modal dialogs using predetermined colors, icon-only colors, or custom colors from the Tailwind color palette.
Predetermined Colors
Apply predetermined color variants: primary, secondary, success, danger, warning, info, light, dark. Use the syntax: modal-[color].
INFO
These color variants come from the button component.
Show Code
html
<Modal
trigger="#modal-primary"
close-button
class="modal-primary"
button-orientation="vertical"
title="modal-primary"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-secondary"
close-button
class="modal-secondary"
button-orientation="vertical"
title="modal-secondary"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-success"
close-button
class="modal-success"
button-orientation="vertical"
title="modal-success"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-danger"
close-button
class="modal-danger"
button-orientation="vertical"
title="modal-danger"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-warning"
close-button
class="modal-warning"
button-orientation="vertical"
title="modal-warning"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-info"
close-button
class="modal-info"
button-orientation="vertical"
title="modal-info"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-light"
close-button
class="modal-light"
button-orientation="vertical"
title="modal-light"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-dark"
close-button
class="modal-dark"
button-orientation="vertical"
title="modal-dark"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Icon-only Colors
Apply icon-only color styling with the syntax: modal-icon-[color]. Available colors: primary, secondary, success, danger, warning, info, light, dark.
Show Code
html
<Modal
trigger="#modal-icon-primary"
close-button
class="modal-icon-dark"
button-orientation="vertical"
title="modal-icon-primary"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-secondary"
close-button
class="modal-icon-secondary"
button-orientation="vertical"
title="modal-icon-secondary"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-success"
close-button
class="modal-icon-success"
button-orientation="vertical"
title="modal-icon-success"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-danger"
close-button
class="modal-icon-danger"
button-orientation="vertical"
title="modal-icon-danger"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-warning"
close-button
class="modal-icon-warning"
button-orientation="vertical"
title="modal-icon-warning"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-info"
close-button
class="modal-icon-info"
button-orientation="vertical"
title="modal-icon-info"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-light"
close-button
class="modal-icon-light"
button-orientation="vertical"
title="modal-icon-light"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-icon-dark"
close-button
class="modal-icon-dark"
button-orientation="vertical"
title="modal-icon-dark"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Custom Colors
Customize the color of a modal element with the Tailwind color palette by using the class: modal-[color].
Show Code
html
<Modal
trigger="#modal-green-500"
close-button
class="modal-green-500"
button-orientation="vertical"
title="modal-green-500"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-amber-500"
close-button
class="modal-amber-500"
button-orientation="vertical"
title="modal-amber-500"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-yellow-500"
close-button
class="modal-yellow-500"
button-orientation="vertical"
title="modal-yellow-500"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>
<Modal
trigger="#modal-red-500"
close-button
class="modal-red-500"
button-orientation="vertical"
title="modal-red-500"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>Customization
The appearance and layout of the modal can be further customized using the following utility classes:
Class | Description |
|---|---|
modal-max-h-[value] | Sets maximum height allowable before overflowing. Supports predetermined, tailwind, or arbitrary sizes. |
modal-header-text-[size] | Set header text size via the header-size prop (predetermined, Tailwind, or arbitrary). |
modal-header-text-[color/value] | Customize header text appearance (color or other utility classes). |
modal-body-text-[size] | Set body text size via the body-size prop (predetermined, Tailwind, or arbitrary). |
modal-body-text-[color/value] | Customize body text appearance (color or other utility classes). |
modal-footer-btn-[size/color] | Modify size or color of footer buttons. |
Show Code
html
<Modal
trigger="#customized"
close-button
button-orientation="vertical"
title="Some Title"
class="modal-header-text-blue-400 modal-body-text-blue-400 modal-footer-btn-green-400 modal-footer-btn-sm"
>
Some Content
<template #buttons="{close}">
<button class="btn" @click="close">Close</button>
</template>
</Modal>