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 multiple 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

Fill Variants

You can apply the variant color to all modal parts (header, body, footer) using the fill property.

Modal Fill 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.