Drawer

<ts-drawer> vv0.4.0

The ts-drawer component.

Open in Storybook for interactive demos.

Preview

<ts-drawer placement="end" size="md">Content</ts-drawer>

Properties

Property	Attribute	Type	Default	Description
dismissible	dismissible	boolean	true	Whether clicking the overlay or pressing Escape closes the drawer.
heading	heading	string | undefined	—	Accessible heading for the drawer.
open	open	boolean	false	Whether the drawer is open.
placement	placement	"bottom" | "end" | "start" | "top"	'end'	Which edge the drawer slides in from.
size	size	"full" | "lg" | "md" | "sm"	'md'	The drawer’s width/height preset.

Events

Event	Detail	Bubbles	Composed	Description
tsClose	void	Yes	Yes	Emitted when the drawer closes.

Methods

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

Slots

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

CSS Parts

Use ::part() to style internal elements:

Part	Description
body	The body wrapper.
close	The close button.
footer	The footer wrapper.
header	The header wrapper.
overlay	The backdrop overlay.
panel	The slide-in panel container.

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

Usage

HTML

<ts-drawer placement="end" size="md">Content</ts-drawer>

React

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

<TsDrawer dismissible placement="end">Content</TsDrawer>