Dialog

A dialog is a window overlaid on either the primary window or another dialog window.

The Dialog is composed of several components that work together through a shared context:

Dialog: The root component that creates the state and provides context to its children.
DialogTrigger: A button that opens the dialog when clicked.
DialogSurface: The <dialog> element that hosts the dialog content.
DialogTitle: The heading of the dialog. Renders as an h3 by default.
DialogContent: The scrollable body of the dialog.
DialogActions: The footer that holds action buttons.

Usage

<script>
	import {
		Dialog,
		DialogTrigger,
		DialogSurface,
		DialogTitle,
		DialogContent,
		DialogActions,
		Button
	} from 'fluentui-svelte';

	let dialog = $state();
</script>

<Dialog bind:this={dialog}>
	<DialogTrigger>Open Dialog</DialogTrigger>
	<DialogSurface>
		<DialogTitle>Dialog Title</DialogTitle>
		<DialogContent>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
		</DialogContent>
		<DialogActions fluid>
			<Button>Save</Button>
			<Button appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
		</DialogActions>
	</DialogSurface>
</Dialog>

Position

Combine top, middle, or bottom with start, center, or end to position the dialog in the viewport. The default is middle-center. Start and end follow the text direction; all positions keep a 1rem gap from viewport edges.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent } from 'fluentui-svelte';
</script>

<Dialog position="top-end">
  <DialogTrigger>top-end</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>Dialog body content.</DialogContent>
  </DialogSurface>
</Dialog>

Entrance and exit motion

Choose fade, zoom, slide, or a subtle bounce for both entrance and exit. Duration accepts a theme name such as normal, a CSS variable name such as --fs-fast-duration, or milliseconds as a number. Use 0 to disable motion. Reduced-motion preferences are respected.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent } from 'fluentui-svelte';
</script>

<Dialog animation="zoom" duration="normal">
  <DialogTrigger>zoom</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>Dialog body content.</DialogContent>
  </DialogSurface>
</Dialog>

<!-- Theme token: duration="fast" or duration="--fs-fast-duration" -->
<!-- Custom milliseconds: duration={200} -->

With Actions

Add a DialogActions region to render action buttons in the dialog footer. Use bind:this on the Dialog to call closeDialog() programmatically.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent, DialogActions, Button } from 'fluentui-svelte';
  let dialog = $state();
</script>

<Dialog bind:this={dialog}>
  <DialogTrigger>Actions Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>Dialog body content.</p>
    </DialogContent>
    <DialogActions fluid>
      <Button>Save</Button>
      <Button appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

Non-modal

A non-modal dialog keeps the page behind it interactive and shows a close button in its corner.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent } from 'fluentui-svelte';
</script>

<Dialog type="non-modal">
  <DialogTrigger>Non-modal Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>The page behind this dialog stays interactive.</p>
    </DialogContent>
  </DialogSurface>
</Dialog>

Alert

An alert dialog is a modal that cannot be dismissed with Escape or by clicking outside of it, so the user has to choose one of its actions.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent, DialogActions, Button } from 'fluentui-svelte';
  let dialog = $state();
</script>

<Dialog type="alert" bind:this={dialog}>
  <DialogTrigger>Alert Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Discard changes?</DialogTitle>
    <DialogContent>
      <p>Your changes will be lost.</p>
    </DialogContent>
    <DialogActions>
      <Button appearance="standard" onclick={() => dialog.closeDialog()}>Cancel</Button>
      <Button onclick={() => dialog.closeDialog()}>Discard</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

Controlled

Bind open to read and control a non-modal dialog from your own state.

View Code

<script>
  import { Dialog, DialogSurface, DialogTitle, DialogContent, Button } from 'fluentui-svelte';
  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open dialog</Button>
<p>open: {open}</p>

<Dialog type="non-modal" bind:open>
  <DialogSurface>
    <DialogTitle>Controlled Dialog</DialogTitle>
    <DialogContent>
      <p>This dialog follows the bound open state.</p>
    </DialogContent>
  </DialogSurface>
</Dialog>

open: false

On Open Change

Pass onOpenChange to be told whenever the dialog opens or closes: from the trigger, a button that calls closeDialog(), Escape, or a click outside.

View Code

<script>
  import { Dialog, DialogTrigger, DialogSurface, DialogTitle, DialogContent, DialogActions, Button } from 'fluentui-svelte';
  let dialog = $state();
  let changes = $state([]);
</script>

<Dialog bind:this={dialog} onOpenChange={(open) => (changes = [...changes, `onOpenChange(${open})`].slice(-5))}>
  <DialogTrigger>Events Dialog</DialogTrigger>
  <DialogSurface>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
      <p>Close it with Escape, by clicking outside or with the button.</p>
    </DialogContent>
    <DialogActions>
      <Button onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

<p>{changes.length ? changes.join(', ') : 'No changes yet'}</p>

No changes yet

Dialog Props

Name	Type	Default	Description
`type`	`'modal'` \| `'non-modal'` \| `'alert'`	`'modal'`	How the dialog behaves once open.
`position`	`DialogPosition`	`'middle-center'`	Where the dialog sits in the viewport. Start and end follow the text direction.
`animation`	`'fade'` \| `'zoom'` \| `'slide'` \| `'bounce'`	`'zoom'`	The entrance and exit animation. Bounce uses a subtle overshoot.
`duration`	`DialogDuration`	`'normal'`	Duration in milliseconds, a theme duration name, or a CSS custom property name. Use 0 for no motion.
`open` bindable	`boolean` \| `null`		Controls the open state of the dialog.
`onOpenChange`	`(open: boolean) => void`		Called whenever the dialog opens or closes.
`children`	`Snippet`		The parts of the dialog: a trigger and a surface.

DialogTrigger Props

Name	Type	Default	Description
`ref` bindable	`HTMLButtonElement` \| `null`		The DOM reference of the trigger element.
`ButtonProps<'button'>`

DialogSurface Props

Name	Type	Default	Description
`ref` bindable	`HTMLDialogElement` \| `null`		The DOM reference of the dialog element.
Element Attributes (`dialog`)

DialogTitle Props

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `HTMLHeadingElement`		The DOM reference of the title element.
`as`	`DialogTitleTag`	`'h3'`	The HTML element to render the title as.
HTML Attributes

DialogContent Props

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		The DOM reference of the content element.
Element Attributes (`div`)

DialogActions Props

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement` \| `null`		The DOM reference of the actions element.
`fluid`	`boolean`		Stretches every action to share the available width evenly.
`position`	`'start'` \| `'center'` \| `'end'`	`'end'`	Where the actions sit along the main axis.
Element Attributes (`div`)

Components

Dialog

Dialog Title

Usage

Position

top-start

top-center

top-end

middle-start

middle-center

middle-end

bottom-start

bottom-center

bottom-end

Entrance and exit motion

fade

zoom

slide

bounce

With Actions

Dialog Title

Non-modal

Dialog Title

Alert

Discard changes?

Controlled

Controlled Dialog

On Open Change

Dialog Title

Dialog Props

DialogTrigger Props

DialogSurface Props

DialogTitle Props

DialogContent Props

DialogActions Props