Drawer · base-ui-svelte

Sides

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Drawer.Root

Extends div HTML attributes.

Property	Type	Default	Description
`open`	`boolean \| undefined`	`—`	Whether the component is open (controlled).
`defaultOpen`	`boolean`	`—`	Whether the component is initially open (uncontrolled).
`onOpenChange`	`((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined`	`—`	Event handler called when the open state changes.
`swipeDirection`	`DrawerSwipeDirection`	`—`	—
`modal`	`boolean`	`—`	—
`disablePointerDismissal`	`boolean`	`—`	—
`snapPoints`	`ReadonlyArray<DrawerSnapPoint>`	`—`	—
`children`	`Snippet<[{ open: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.
`data-swipe-direction`	Direction of an active toast swipe.
`data-swiping`	Present on the element when applicable.

Drawer.Provider

Property	Type	Default	Description
`swipeDirection`	`DrawerSwipeDirection`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

Drawer.Backdrop

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-ending-style`	Present while the exit animation can run.
`data-open`	Present when the part is open.
`data-starting-style`	Present while the enter animation can run.

Drawer.Close

Extends button HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Drawer.Content

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Drawer.Description

Extends paragraph HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Drawer.Indent

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-active`	Present when the item is active.
`data-inactive`	Present on the element when applicable.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.IndentBackground

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-active`	Present when the item is active.
`data-inactive`	Present on the element when applicable.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.Popup

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-ending-style`	Present while the exit animation can run.
`data-open`	Present when the part is open.
`data-starting-style`	Present while the enter animation can run.
`data-swipe-direction`	Direction of an active toast swipe.
`data-swipe-snap`	Present on the element when applicable.
`data-swiping`	Present on the element when applicable.

Drawer.Portal

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Drawer.SwipeArea

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`swipeDirection`	`DrawerSwipeDirection`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.
`data-swipe-direction`	Direction of an active toast swipe.
`data-swiping`	Present on the element when applicable.

Drawer.Title

Extends heading HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Drawer.Trigger

Extends button HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

Drawer.Viewport

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-ending-style`	Present while the exit animation can run.
`data-keyboard-open`	Present on the element when applicable.
`data-open`	Present when the part is open.
`data-starting-style`	Present while the enter animation can run.
`data-swipe-direction`	Direction of an active toast swipe.

Drawer.VirtualKeyboardProvider

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-keyboard-open`	Present on the element when applicable.