Dialog

Basic dialog

Open: false

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <FuiDialog v-model="open">
    <template #trigger>
      <FuiButton appearance="primary">Open Dialog</FuiButton>
    </template>
    <template #title>Confirm action</template>
    <template #description>
      Are you sure you want to proceed?
    </template>
    <template #close>
      <FuiStack direction="horizontal" spacing="s">
        <FuiButton appearance="outline">Cancel</FuiButton>
        <FuiButton appearance="primary">Confirm</FuiButton>
      </FuiStack>
    </template>
  </FuiDialog>
</template>

Slots

Slot	Description
trigger	Element that opens the dialog
title	Dialog title
description	Dialog description text
close	Elements in the close area (footer)
default	Additional content

Props

Prop	Type	Default	Description
modelValue	boolean	false	Dialog open state