Dialog

<ts-dialog> vv0.4.0

The ts-dialog component.

Open in Storybook for interactive demos.

Preview

<ts-dialog size="sm">Content</ts-dialog>

Properties

Property	Attribute	Type	Default	Description
dismissible	dismissible	boolean	true	Whether the dialog can be dismissed via close button, Escape, or overlay click.
heading	heading	string | undefined	—	The dialog heading text.
open	open	boolean	false	Whether the dialog is open.
size	size	"lg" | "md" | "sm"	'sm'	The dialog’s width size preset.

Events

Event	Detail	Bubbles	Composed	Description
tsClose	void	Yes	Yes	Emitted when the dialog is closed.

Methods

Method	Signature	Description
close	close() => Promise<void>	Programmatically close the dialog.
show	show() => Promise<void>	Programmatically open the dialog.

Slots

Name	Description
*(default)*	Default slot for dialog body content.
footer	Footer content (e.g., action buttons).

CSS Parts

Use ::part() to style internal elements:

Part	Description
body	The body content wrapper.
close	The close button.
dialog	The dialog container.
footer	The footer wrapper.
header	The heading wrapper.
overlay	The backdrop overlay.

ts-dialog::part(body) {
  /* your custom styles */
}

Usage

HTML

<ts-dialog size="sm">Content</ts-dialog>

React

import { TsDialog } from '@tessera-ui/react';

<TsDialog dismissible size="sm">Content</TsDialog>