Modals are dialogs that can be used for lightboxes, user notifications, or completely custom content.


To create a modal, create an element (such as an <i-button>) as a trigger and the v-model on an <i-modal> component to control its visibility. Everything inside the <i-modal> is rendered as the modal body. Optionally, you can provide a modal header and footer using slot="header" and slot="footer".

Modal Example


You're able to use the size modifier to control the size of your modals, using one of the available sizes: sm, md, and lg. The default size is set to md.

Modal Sizes


Inkline includes two predefined modal styles, each serving its own semantic purpose. You can set the style of a <i-modal> using the variant property. By default, modals use the light variant.

Modal Variants

Component API

Here you can find a list of the various customization options you can use for the modal component as props, as well as available slots and events.

Modal API

Sass Variables

Here you can find a list of the Sass variables you can use for the modal components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.