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.

<i-button @click="visible = true">
    Show Modal
</i-button>

<i-modal v-model="visible">
    <template #header>
        Modal Header
    </template>
    This is the modal body. Useful information goes here.
    <template #footer>
        Modal Footer
    </template>
</i-modal>

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.

<i-button @click="visible = true">
    Show Small Modal
</i-button>

<i-modal v-model="visible" size="sm">
    <template #header>
        Small Modal
    </template>
    This is the modal body. Useful information goes here.
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button @click="visible = true">
    Show Medium Modal
</i-button>

<i-modal v-model="visible" size="md">
    <template #header>
        Medium Modal
    </template>
    This is the modal body. Useful information goes here.
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button @click="visible = true">
    Show Large Modal
</i-button>

<i-modal v-model="visible" size="lg">
    <template #header>
        Large Modal
    </template>
    This is the modal body. Useful information goes here.
    <template #footer>
        Modal Footer
    </template>
</i-modal>

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.

<i-button color="primary" @click="visible = true">
    Show Primary Modal
</i-button>

<i-modal color="primary" v-model="visible">
    <template #header>
        Primary Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="secondary" @click="visible = true">
    Show Secondary Modal
</i-button>

<i-modal color="secondary" v-model="visible">
    <template #header>
        Secondary Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="light" @click="visible = true">
    Show Light Modal
</i-button>

<i-modal color="light" v-model="visible">
    <template #header>
        Light Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="dark" @click="visible = true">
    Show Dark Modal
</i-button>

<i-modal color="dark" v-model="visible">
    <template #header>
        Dark Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="info" @click="visible = true">
    Show Info Modal
</i-button>

<i-modal color="info" v-model="visible">
    <template #header>
        Info Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-info" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="success" @click="visible = true">
    Show Success Modal
</i-button>

<i-modal color="success" v-model="visible">
    <template #header>
        Success Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-check" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="warning" @click="visible = true">
    Show Warning Modal
</i-button>

<i-modal color="warning" v-model="visible">
    <template #header>
        Warning Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-warning" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

<i-button color="danger" @click="visible = true">
    Show Danger Modal
</i-button>

<i-modal color="danger" v-model="visible">
    <template #header>
        Danger Modal
    </template>
    <div class="_display:flex _align-items:center">
        <i-icon name="ink-danger" class="h2 _margin-y:0 _margin-right:1" />
        This is the modal body. Useful information goes here.
    </div>
    <template #footer>
        Modal Footer
    </template>
</i-modal>

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