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>

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 style="flex: 1 1 auto;">Save</Button>
      <Button style="flex: 1 1 auto;" appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
    </DialogActions>
  </DialogSurface>
</Dialog>

Dialog Props

Name	Type	Default	Description
`type`	`'modal'` \| `'non-modal'` \| `'alert'`	`'modal'`	How the dialog behaves once open.
`open` bindable	`boolean`		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`	`HTMLButtonElement`		The DOM reference of the trigger element.
`ButtonProps<'button'>`

DialogSurface Props

Name	Type	Default	Description
`ref` bindable	`HTMLDialogElement`		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`	`HTMLDivElement`		The DOM reference of the content element.
Element Attributes (`div`)

DialogActions Props

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		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`)