Modal

<ts-modal> vv0.4.0

The ts-modal component.

Open in Storybook for interactive demos.

Preview

<ts-modal>Content</ts-modal>

Property	Attribute	Type	Default	Description
`closeOnEscape`	`close-on-escape`	`boolean`	`true`	Whether pressing Escape closes the modal.
`closeOnOverlay`	`close-on-overlay`	`boolean`	`true`	Whether clicking the overlay closes the modal.
`label`	`label`	`string \| undefined`	—	Label for accessibility (used as aria-label).
`open`	`open`	`boolean`	`false`	Whether the modal is open.
`showClose`	`show-close`	`boolean`	`true`	Whether to show the close button.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The modal’s width size preset.

Event	Detail	Bubbles	Composed	Description
`tsClose`	`void`	Yes	Yes	Emitted when the modal closes.
`tsOpen`	`void`	Yes	Yes	Emitted when the modal opens.

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

Name	Description
`(default)`	Default slot for modal body content.
`footer`	Modal footer content (e.g., action buttons).
`header`	Modal header content.

Use ::part() to style internal elements:

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

<ts-modal>Content</ts-modal>

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

<TsModal closeOnEscape closeOnOverlay>Content</TsModal>