Modal

A dialog overlay for confirmations, forms, or detailed content. Renders via <Teleport to="body"> to avoid z-index issues.

Demo

Glass Modal

Large Glass Modal

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LiquidModal, LiquidButton } from '@liquid/ui'

const isOpen = ref(false)
</script>

<template>
  <LiquidButton @click="isOpen = true">Open Modal</LiquidButton>

  <LiquidModal
    v-model="isOpen"
    title="Confirm Delete"
    size="md"
    :show-close="true"
  >
    <!-- Default slot: modal body content -->
    <p>Are you sure you want to delete this item?</p>

    <!-- Named slot: footer actions -->
    <template #footer>
      <LiquidButton variant="outline" @click="isOpen = false">Cancel</LiquidButton>
      <LiquidButton variant="danger" @click="handleDelete">Delete</LiquidButton>
    </template>
  </LiquidModal>
</template>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Controls visibility (use with v-model)
title	string	''	Modal header title
size	'sm' | 'md' | 'lg' | 'xl'	'md'	Modal width
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	Visual style
showClose	boolean	true	Show the × close button in the header

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when modal should close (overlay click or × button)

Slots

Slot	Description
default	Modal body content
footer	Footer area (typically action buttons)

Notes

• Modal uses <Teleport to="body">, so it always renders above all other content.
• Clicking the overlay backdrop closes the modal by emitting update:modelValue with false.
• In VitePress, wrap <LiquidModal> in <ClientOnly> to avoid SSR hydration issues with Teleport.