Modal

Accessible modal dialog with focus trap.

Features

• Focus trap — Tab cycles within modal
• Escape to close — Keyboard dismissal
• Backdrop click — Click outside to close
• 4 sizes — sm, md, lg, full
• Slots — Header, content, footer

Usage

<script setup>
import { ref } from 'vue'
import { FkModal, FkButton } from '@fortune-kit/components'

const isOpen = ref(false)
</script>

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

  <FkModal
    v-model:open="isOpen"
    title="Modal Title"
    description="Optional description text."
    size="md"
  >
    <p>Modal content goes here.</p>

    <template #footer>
      <FkButton variant="ghost" @click="isOpen = false">Cancel</FkButton>
      <FkButton @click="isOpen = false">Confirm</FkButton>
    </template>
  </FkModal>
</template>

Props

Prop	Type	Default	Description
open	boolean	Required	Modal visibility
title	string	—	Modal title
description	string	—	Description text
closeOnBackdrop	boolean	true	Close on backdrop click
closeOnEscape	boolean	true	Close on Escape key
size	'sm' | 'md' | 'lg' | 'full'	'md'	Modal size

Slots

Slot	Description
default	Main content
header	Custom header content
footer	Footer with actions