Drawer

A drawer slides a panel in from an edge of the screen, where users read details or complete a short task without leaving the page. By default, it rises from the bottom edge, and while it is open, focus stays in the drawer and the page behind it doesn't scroll. Users close it with a swipe toward its edge, a close button, the Escape key or a press outside the drawer. On a touch screen, the swipe starts anywhere on the drawer. With a mouse, it starts on the swipe handle only, because a drag in the content selects text.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import {
	Drawer,
	DrawerClose,
	DrawerContent,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerTitle,
	DrawerTrigger,
} from "@biem/ui/components/ui/drawer";

export function DrawerDefault() {
	return (
		<Drawer>
			<DrawerTrigger render={<Button variant="outline"/>}>Review transfer</DrawerTrigger>
			<DrawerContent>
				<div className="mx-auto w-full max-w-sm">
					<DrawerHeader>
						<DrawerTitle>Transfer 4821</DrawerTitle>
						<DrawerDescription>
							The warehouse ships 12 cases to the store in Basel.
						</DrawerDescription>
					</DrawerHeader>
					<p className="p-4">
						The cases leave the warehouse on Monday. The store receives them on Tuesday between 6:00 and 8:00.
					</p>
					<DrawerFooter>
						<Button>Approve transfer</Button>
						<DrawerClose render={<Button variant="outline"/>}>Cancel</DrawerClose>
					</DrawerFooter>
				</div>
			</DrawerContent>
		</Drawer>
	);
}

ExamplesCopy Anchor Link

Swipe UpCopy Anchor Link

Some content belongs near the upper edge of a screen, such as filters that apply to the list beneath them. With swipeDirection set to "up", the drawer slides in from the top edge, and users close it with a swipe upward.

Swipe DownCopy Anchor Link

On a phone, the lower edge lies within reach of the thumb, which makes it the natural place for a short task. This edge is the default, and swipeDirection set to "down" states it explicitly.

Swipe LeftCopy Anchor Link

Navigation between the areas of a product commonly opens from the left side of the screen. Set to "left", swipeDirection brings the drawer in from that edge, and a swipe to the left closes it again.

Swipe RightCopy Anchor Link

Details that accompany the current page, such as the history of an order, usually open at the right edge. Through the value "right" of swipeDirection, the drawer enters from there, and users swipe it back to the right to close it.

With Swipe HandleCopy Anchor Link

A drag with the mouse in the content of a drawer selects text instead of moving the drawer. Once showSwipeHandle is set, the drawer offers a handle that users drag with a mouse or a finger, to close the drawer or to move it to another snap point.

With Snap PointsCopy Anchor Link

Long content often deserves a first glance before users decide to read all of it. Through snapPoints, the drawer comes to rest at several heights, opens at the first of them, and moves between them as users swipe.

Default Snap PointCopy Anchor Link

Where users need the full content from the start, defaultSnapPoint opens the drawer at another of its snap points instead of the first. Users still swipe it down to a smaller height or close it.

Controlled Snap PointCopy Anchor Link

An application can move the drawer between its heights on its own, for example to expand it when a step inside it needs more room. For this, snapPoint and onSnapPointChange hold the current snap point in the application, while users keep swiping between the heights.

Sequential Snap PointsCopy Anchor Link

With three or more heights, a quick swipe can carry the drawer past the ones in between. Once snapToSequentialPoints is set, the distance of the drag alone decides the next snap point, and the speed of a swipe no longer skips one.

NestedCopy Anchor Link

A task in a drawer can raise a related question that deserves room of its own. Opened from within the first, a second drawer stacks above it, and once users close it, they return to the first drawer as they left it.

ControlledCopy Anchor Link

The application sometimes decides when the drawer opens or closes, for example to close it as soon as a change has been saved. Through open and onOpenChange it holds that state, and users keep every way to open and close the drawer.

Disabled TriggerCopy Anchor Link

Details can depend on data that is still on its way, such as a report that has not been generated yet. Marked as disabled, the trigger no longer opens the drawer, while users still see that the details exist.

Disabled CloseCopy Anchor Link

A single close button can lose its purpose for a moment, for example while an entry is being saved. With disabled, that button ignores presses, yet a swipe, the Escape key and a press outside the drawer still close it.

API ReferenceCopy Anchor Link

DrawerCopy Anchor Link

DrawerTriggerCopy Anchor Link

DrawerPortalCopy Anchor Link

DrawerOverlayCopy Anchor Link

DrawerContentCopy Anchor Link

DrawerSwipeHandleCopy Anchor Link

DrawerSwipeHandle shows the bar that users drag to close the drawer or to move it to another snap point. DrawerContent renders it when showSwipeHandle is set on Drawer. It renders a div and has no props of its own.

DrawerHeaderCopy Anchor Link

DrawerHeader groups the title and the description. It renders a div and has no props of its own.

DrawerTitleCopy Anchor Link

DrawerDescriptionCopy Anchor Link

DrawerFooterCopy Anchor Link

DrawerFooter stacks the actions at the end of the drawer. It renders a div and has no props of its own.

DrawerCloseCopy Anchor Link