Dialog

SDialog is a modal window built on Reka UI: focus trap, closing on Esc and on an outside click, a portal, and correct ARIA relationships. It is controlled with v-model:open; the trigger is passed through a slot.

Basic usage

<template>
  <SDialog
    v-model:open="open"
    title="Confirmation"
    description="Are you sure you want to continue?"
  >
    <template #trigger>
      <SButton>Open dialog</SButton>
    </template>

    The dialog content goes in the default slot.

    <template #footer>
      <SButton variant="ghost">Cancel</SButton>
      <SButton variant="primary">Confirm</SButton>
    </template>
  </SDialog>
</template>

Title and close slots

The title, description, and close slots replace the default markup, for example to add an icon to the title and replace the close cross with an SIcon.

Width

The window is 32rem wide by default. The width prop sets a different width as a CSS length or a number of pixels; on a narrow screen the window is still no wider than 92vw. The same width can be set with the --s-dialog-width variable if it is easier to set it from a theme or a class.

The window is rendered in a portal at body, so the class, style, and attributes passed to SDialog land directly on .s-dialog__content: this lets you reach the content without global selectors.

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
width	string | number	undefined	Window width: a CSS length or a number in pixels. On a narrow screen the window is still no wider than 92vw. Without the prop the width comes from the --s-dialog-width variable (32rem by default).
title	string	undefined	Dialog title (can be replaced with the title slot).
description	string	undefined	Dialog description (can be replaced with the description slot).
close-label	string	undefined	Accessible name of the close button (defaults to the locale dictionary).
open	boolean	undefined	Whether the dialog is open. Two-way binding via v-model:open.

Events

Name	Signature	Description
update:open	(value: boolean | undefined) => void	Emitted when open changes. Used for two-way binding (v-model:open).

Slots

Name	Description
trigger	Trigger element that opens the dialog (wrapped in DialogTrigger).
title	Dialog title (replaces the title prop).
description	Dialog description (replaces the description prop).
default	Main content (body) of the dialog.
footer	Dialog footer, usually action buttons.
close	Content of the close button ("×" by default).