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 <IButton>) as a trigger and the v-model on an <IModal> component to control its visibility. Everything inside the <IModal> is rendered as the modal body. Optionally, you can provide a modal header and footer using #header and #footer slots.

Color Variants

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

Size Variants

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




Design Tokens