Modal
Modals are dialogs that can be used for lightboxes, user notifications, or completely custom content.
Example
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 #header
and #footer
slots.
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
.
Color Variants
Inkline includes multiple predefined modal styles, each serving its own semantic purpose. You can set the style of a <i-modal>
using the color
property. By default, modals use the light
variant.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
closeOnPressEscape
TypeBoolean
Defaulttrue
Description Determines if the modal should close when pressing escape - Property
closeAriaLabel
TypeString
DefaultClose
Description The aria-label attribute of the close button - Property
color
Type'primary' | 'success' | 'light' | 'dark' | 'info' | 'success' | 'warning' | 'danger'
Default'light'
Description The color variant of the modal - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the modal - Property
hideOnClickOutside
TypeBoolean
Defaulttrue
Description Determines if the modal should close when clicking the overlay - Property
name
TypeString
Defaultuid()
Description The identifier of the modal - Property
showClose
TypeBoolean
Defaultfalse
Description Determines if the close icon should be visible in the modal header - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the modal - Property
modelValue
TypeBoolean
Defaultfalse
Description Used to determine if modal is visible or not - Property
transition
Typefade-in-transition | fade-in-linear-transition | zoom-in-top-transition | zoom-in-bottom-transition | zoom-in-center-transition | zoom-in-left-transition | zoom-in-right-transition
Defaultzoom-in-center-transition
Description The modal opening and closing animation
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for modal body content - Property
header
Description Slot for modal header content - Property
footer
Description Slot for modal footer content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue - Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('white')
Description The background of the modal component - Property
----border-top-color
Valuecolor('light')
Description The border top color of the modal component - Property
----border-right-color
Valuecolor('light')
Description The border right color of the modal component - Property
----border-bottom-color
Valuecolor('light')
Description The border bottom color of the modal component - Property
----border-left-color
Valuecolor('light')
Description The border left color of the modal component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the modal component - Property
----border-style
Valuevar(--border-style)
Description The border style of the modal component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the modal component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the modal component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the modal component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the modal component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the modal component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the modal component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the modal component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the modal component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the modal component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the modal component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the modal component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the modal component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the modal component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the modal component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the modal component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the modal component - Property
----color
Valuecontrast-color($color-light)
Description The color of the modal component - Property
----font-size
Valuefont-size()
Description The font size of the modal component - Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the modal component - Property
----line-height
Valuevar(--line-height)
Description The line height of the modal component - Property
----margin-top
Valuevar(--margin-top)
Description The margin top of the modal component - Property
----margin-right
Valuevar(--margin-right)
Description The margin right of the modal component - Property
----margin-bottom
Valuevar(--margin-bottom)
Description The margin bottom of the modal component - Property
----margin-left
Valuevar(--margin-left)
Description The margin left of the modal component - Property
----margin
Valuevar(----margin-top) var(----margin-right) var(----margin-bottom) var(----margin-left)
Description The margin of the modal component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the modal component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the modal component - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the modal component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the modal component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the modal component - Property
----width
Value480px
Description The width of the modal component - Property
----header--background
Valuecolor('light-25')
Description The background of the modal component header - Property
----header--border-color
Valuevar(----border-color)
Description The border color of the modal component header - Property
----header--border-style
Valuevar(----border-style)
Description The border style of the modal component header - Property
----header--border-top-width
Valuevar(----border-top-width)
Description The border top width of the modal component header - Property
----header--border-right-width
Valuevar(----border-right-width)
Description The border right width of the modal component header - Property
----header--border-bottom-width
Valuevar(----border-bottom-width)
Description The border bottom width of the modal component header - Property
----header--border-left-width
Valuevar(----border-left-width)
Description The border left width of the modal component header - Property
----header--border-width
Valuevar(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)
Description The border width of the modal component header - Property
----header--color
Valuevar(----color)
Description The color of the modal component header - Property
----header--padding-top
Valuevar(----padding-top)
Description The padding top of the modal component header - Property
----header--padding-right
Valuevar(----padding-right)
Description The padding right of the modal component header - Property
----header--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the modal component header - Property
----header--padding-left
Valuevar(----padding-left)
Description The padding left of the modal component header - Property
----header--padding
Valuevar(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)
Description The padding of the modal component header - Property
----body--background
Valuevar(----background)
Description The background of the modal component body - Property
----body--border-color
Valuevar(----border-color)
Description The border color of the modal component body - Property
----body--border-style
Valuevar(----border-style)
Description The border style of the modal component body - Property
----body--border-top-width
Valuevar(----border-top-width)
Description The border top width of the modal component body - Property
----body--border-right-width
Valuevar(----border-right-width)
Description The border right width of the modal component body - Property
----body--border-bottom-width
Valuevar(----border-bottom-width)
Description The border bottom width of the modal component body - Property
----body--border-left-width
Valuevar(----border-left-width)
Description The border left width of the modal component body - Property
----body--border-width
Valuevar(----body--border-top-width) var(----body--border-right-width) var(----body--border-bottom-width) var(----body--border-left-width)
Description The border width of the modal component body - Property
----body--color
Valuevar(----color)
Description The color of the modal component body - Property
----body--padding-top
Valuevar(----padding-top)
Description The padding top of the modal component body - Property
----body--padding-right
Valuevar(----padding-right)
Description The padding right of the modal component body - Property
----body--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the modal component body - Property
----body--padding-left
Valuevar(----padding-left)
Description The padding left of the modal component body - Property
----body--padding
Valuevar(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)
Description The padding of the modal component body - Property
----footer--background
Valuecolor('light-25')
Description The background of the modal component footer - Property
----footer--border-color
Valuevar(----border-color)
Description The border color of the modal component footer - Property
----footer--border-style
Valuevar(----border-style)
Description The border style of the modal component footer - Property
----footer--border-top-width
Valuevar(----border-top-width)
Description The border top width of the modal component footer - Property
----footer--border-right-width
Valuevar(----border-right-width)
Description The border right width of the modal component footer - Property
----footer--border-bottom-width
Valuevar(----border-bottom-width)
Description The border bottom width of the modal component footer - Property
----footer--border-left-width
Valuevar(----border-left-width)
Description The border left width of the modal component footer - Property
----footer--border-width
Valuevar(----footer--border-top-width) var(----footer--border-right-width) var(----footer--border-bottom-width) var(----footer--border-left-width)
Description The border width of the modal component footer - Property
----footer--color
Valuevar(----color)
Description The color of the modal component footer - Property
----footer--padding-top
Valuevar(----padding-top)
Description The padding top of the modal component footer - Property
----footer--padding-right
Valuevar(----padding-right)
Description The padding right of the modal component footer - Property
----footer--padding-bottom
Valuevar(----padding-bottom)
Description The padding bottom of the modal component footer - Property
----footer--padding-left
Valuevar(----padding-left)
Description The padding left of the modal component footer - Property
----footer--padding
Valuevar(----footer--padding-top) var(----footer--padding-right) var(----footer--padding-bottom) var(----footer--padding-left)
Description The padding of the modal component footer - Property
----wrapper--background
Valuergba(0, 0, 0, 0.75)
Description The overlay background of the modal component wrapper