Drawer

SDrawer is a panel that slides in from the side (or from the top or bottom). It is built on the modal Reka UI Dialog primitive (focus trap, Esc, overlay, portal) and attached to an edge with the side prop. It is controlled with v-model:open; the title and description come from props or slots, the body from the default slot, and the buttons from the #footer slot.

Sides

Title and close slots

The title, description, and close slots replace the default header markup, for example an icon next to the title and a custom close button with SIcon.

The panel is rendered in a portal at body, so the class, style, and attributes passed to SDrawer land directly on .s-drawer__content.

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square corners: removes the rounding (rounded by default).
side	| "right" | "left" | "top" | "bottom"	"right"	Side the drawer is attached to.
title	string	undefined	Drawer title (can be replaced with the title slot).
description	string	undefined	Description below the title (can be replaced with the description slot).
close-label	string	undefined	Accessible name of the close button (taken from the locale dictionary by default).
open	boolean	undefined	Whether the drawer 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 drawer (wrapped in DialogTrigger).
title	Title (replaces the title prop).
description	Description (replaces the description prop).
default	Main content (body) of the drawer.
footer	Footer, usually action buttons.
close	Close button content (× by default).