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 slot="header" and slot="footer".

Modal Example

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

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

export default {
  data () {
    return {
      visible: false
    };
  }
}

Sizes

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

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

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

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

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

export default {
  data () {
    return {
      visible: false
    };
  }
}

Variants

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

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

<i-button variant="primary" @click="visible = true">Primary Modal</i-button>
<i-modal variant="primary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="secondary" @click="visible = true">Secondary Modal</i-button>
<i-modal variant="secondary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="light" @click="visible = true">Light Modal</i-button>
<i-modal variant="light" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="dark" @click="visible = true">Dark Modal</i-button>
<i-modal variant="dark" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="info" @click="visible = true">Info Modal</i-button>
<i-modal variant="info" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="success" @click="visible = true">Success Modal</i-button>
<i-modal variant="success" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="warning" @click="visible = true">Warning Modal</i-button>
<i-modal variant="warning" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="danger" @click="visible = true">Danger Modal</i-button>
<i-modal variant="danger" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

export default {
  data () {
    return {
      visible: false
    };
  }
}

Fill Variants

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

Modal Fill Variants

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

Modal Header

This is the modal body. Useful information goes here.

Modal Footer

<i-button variant="primary" @click="visible = true">Primary Modal</i-button>
<i-modal fill variant="primary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="secondary" @click="visible = true">Secondary Modal</i-button>
<i-modal fill variant="secondary" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="light" @click="visible = true">Light Modal</i-button>
<i-modal fill variant="light" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="dark" @click="visible = true">Dark Modal</i-button>
<i-modal fill variant="dark" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="info" @click="visible = true">Info Modal</i-button>
<i-modal fill variant="info" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="success" @click="visible = true">Success Modal</i-button>
<i-modal fill variant="success" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="warning" @click="visible = true">Warning Modal</i-button>
<i-modal fill variant="warning" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

<i-button variant="danger" @click="visible = true">Danger Modal</i-button>
<i-modal fill variant="danger" v-model="visible">
    <template slot="header">Modal Header</template>
    This is the modal body. Useful information goes here.
    <template slot="footer">Modal Footer</template>
</i-modal>

export default {
  data () {
    return {
      visible: false
    };
  }
}

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

Property close-on-press-escape

Type Boolean

Accepted true, false

Default true

Description Sets whether to hide the modal component when pressing escape.

Property fill

Type Boolean

Accepted true, false

Default false

Description Sets the variant color for all modal elements (header, body, footer).

Property value

Type Boolean

Accepted true, false

Default false

Description Sets the visibility of the modal component.

Property transition

Type String

Accepted fade-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

Default zoom-in-center-transition

Description Sets the transition of the modal component.

Slot default

Description Slot for modal default content.

Slot header

Description Slot for modal header content.

Slot footer

Description Slot for modal footer content.

Event input

Type (visible: Boolean) => {}

Description Emitted when visibility changes.

Event show

Type (instance: VueComponent) => {}

Description Emitted when modal is shown.

Event hide

Type (instance: VueComponent) => {}

Description Emitted when modal is hidden.

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.

Modal

Property $modal-font-size

Default $font-size

Property $modal-font-weight

Default $font-weight-normal

Property $modal-line-height

Default $line-height

Property $modal-margin

Default $spacer

Property $modal-width-base

Default 480px

Property $modal-width

Default size-map($modal-width-base, $sizes, $size-multipliers)

Property $modal-border-width

Default $border-width

Property $modal-border-radius

Default $border-radius

Property $modal-border-color-light

Default $border-color-light

Property $modal-background-light

Default $color-white

Property $modal-border-color-dark

Default $border-color-dark

Property $modal-background-dark

Default $color-dark

Property $modal-overlay-background

Default rgba(0, 0, 0, 0.75)

Property $modal-padding-base

Default $spacer

Property $modal-padding

Default size-map($modal-padding-base, $sizes, $size-multipliers)

Property $modal-color-for-light-variant

Default $color-for-light-variant

Property $modal-color-for-dark-variant

Default $color-for-dark-variant

Property $modal-variant-{variant}

Default modal-variant($color-{variant})

Property $modal-variants

Default

(
    primary: $modal-variant-primary,
    secondary: $modal-variant-secondary,
    light: $modal-variant-light,
    dark: $modal-variant-dark,
    info: $modal-variant-info,
    success: $modal-variant-success,
    warning: $modal-variant-warning,
    danger: $modal-variant-danger
)

Function modal-variant

Default

@function modal-variant($variant) {
    $modal-variant-fill-color: variant-color-by-luminance($variant, $modal-color-for-light-variant, $modal-color-for-dark-variant);
    $modal-variant-fill-background: $variant;
    $modal-variant-fill-header-background: darken-lightness($modal-variant-fill-color, 10%);
    $modal-variant-fill-footer-background: $modal-variant-fill-color;
    $modal-variant-fill-border-color: darken-lightness($variant, 10%);

    $modal-variant-color-light: $modal-color-for-light-variant;
    $modal-variant-background-light: $color-white;
    $modal-variant-border-color-light: $border-color-light;
    $modal-variant-header-color-light: variant-color-by-luminance($variant, $modal-color-for-light-variant, $modal-color-for-dark-variant);
    $modal-variant-header-background-light: $variant;
    $modal-variant-header-border-color-light: $modal-variant-fill-border-color;
    $modal-variant-footer-color-light: $modal-variant-color-light;
    $modal-variant-footer-background-light: $modal-variant-background-light;
    $modal-variant-footer-border-color-light: $modal-variant-border-color-light;

    $modal-variant-color-dark: $modal-color-for-dark-variant;
    $modal-variant-background-dark: $color-dark;
    $modal-variant-border-color-dark: $border-color-dark;
    $modal-variant-header-color-dark: variant-color-by-luminance($variant, $modal-color-for-light-variant, $modal-color-for-dark-variant);
    $modal-variant-header-background-dark: $variant;
    $modal-variant-header-border-color-dark: $modal-variant-fill-border-color;
    $modal-variant-footer-color-dark: $modal-variant-color-dark;
    $modal-variant-footer-background-dark: $modal-variant-background-dark;
    $modal-variant-footer-border-color-dark: $modal-variant-border-color-dark;

    $variant-map: (
        color-light: $modal-variant-color-light,
        background-light: $modal-variant-background-light,
        border-color-light: $modal-variant-border-color-light,
        header-color-light: $modal-variant-header-color-light,
        header-background-light: $modal-variant-header-background-light,
        header-border-color-light: $modal-variant-header-border-color-light,
        footer-color-light: $modal-variant-footer-color-light,
        footer-background-light: $modal-variant-footer-background-light,
        footer-border-color-light: $modal-variant-footer-border-color-light,
        color-dark: $modal-variant-color-dark,
        background-dark: $modal-variant-background-dark,
        border-color-dark: $modal-variant-border-color-dark,
        header-color-dark: $modal-variant-header-color-dark,
        header-background-dark: $modal-variant-header-background-dark,
        header-border-color-dark: $modal-variant-header-border-color-dark,
        footer-color-dark: $modal-variant-footer-color-dark,
        footer-background-dark: $modal-variant-footer-background-dark,
        footer-border-color-dark: $modal-variant-footer-border-color-dark,
        fill-color: $modal-variant-fill-color,
        fill-background: $modal-variant-fill-background,
        fill-header-background: $modal-variant-fill-header-background,
        fill-footer-background: $modal-variant-fill-footer-background,
        fill-border-color: $modal-variant-fill-border-color,
    );

    @return $variant-map;
}