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
You're able to use the
size modifier to control the size of your modals, using one of the available sizes:
The default size is set to
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
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.
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.