Dialog

Modal overlay for focused interactions — confirmations, forms, or detailed content that requires attention.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { ref } from 'vue';
import { Dialog, Button } from '@yellowcard/b2b-design-system';

const open = ref(false);
</script>

<template>
  <Button label="Open Dialog" @click="open = true" />

  <Dialog v-model="open" size="medium">
    <template #header>Confirm Action</template>
    <template #body>
      <p>Are you sure you want to proceed?</p>
    </template>
    <template #footer>
      <Button label="Cancel" hierarchy="secondary-grey" @click="open = false" />
      <Button label="Confirm" hierarchy="primary" @click="open = false" />
    </template>
  </Dialog>
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	boolean	—	Controls visibility (v-model)
size	'small' | 'medium' | 'large' | 'full'	'medium'	Dialog size
position	string	—	Dialog position on screen
width	string	—	Custom width override
height	string	—	Custom height override
dismissible	boolean	true	Show close button
closeOnOverlay	boolean	true	Close when clicking overlay
closeOnEscape	boolean	true	Close on Escape key
trapFocus	boolean	true	Trap focus within dialog
persistent	boolean	false	Prevent dismissal (requires explicit close)
loading	boolean	false	Show loading overlay
zIndex	number	—	Custom z-index

Events

Event	Payload	Description
update:modelValue	boolean	Visibility change

Slots

Slot	Bindings	Description
header	—	Dialog header/title content
body	—	Main dialog content
footer	—	Footer with actions

Accessibility

• Uses role="dialog" with aria-modal="true"
• Focus is trapped within the dialog
• Escape key closes the dialog (unless persistent)
• Focus returns to trigger element on close