Drawer | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Drawers and sheets

Review details or continue a task without leaving the screen. A Sheet opens from a chosen side. A Drawer is a task panel that closes with a swipe.

QUICK ACTION / MOBILE

Bottom drawer

A task panel for touch, mouse gestures, and the keyboard.

Usage

Show a task panel that closes with a swipe on mobile. Also provide keyboard support and a close button.

Don't treat the close gesture as done or save. Put those on an explicit button in the Footer. Don't build UI that works only by dragging. Offer a keyboard and button path too.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Trigger → Content(handle / popup) → Header / Body / Footer

Keyboard and accessibility

Focus stays inside the panel. Escape or the close button closes it. After a swipe dismisses it, focus returns to the Trigger.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Drawer, Button } from '@surflane/ui'

<Drawer.Root>
  <Drawer.Trigger render={<Button />}>Prepare run</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Prepare deployment</Drawer.Title>
      <Drawer.Description>Preview only.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Body>Run settings</Drawer.Body>
    <Drawer.Footer>
      <Drawer.Close render={<Button />}>Cancel</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Key API

Drawer — common wrapper props
Prop	Contract	Default
`Root.side`	left \| right \| top \| bottom; derives swipe direction	bottom
`Content.flush`	attaches the panel to its edge, square corners there	false
`--surf-panel-width`	custom property: a width that keeps the surrounding density	Content.size
`--surf-panel-height`	custom property: holds a top or bottom panel at one height	auto
`--surf-panel-inset`	custom property: the side padding of the head, body and footer	--surf-space-6
`Footer.stacked`	stacks the actions, each the full width	false
`Content.size`	small \| default \| large: 320 / 440 / 640px wide, and density	large
`Content.closeLabel`	accessible X label	Close panel
`Content.focusBoundaryLabel`	names the focus guards at the edges, which screen readers reach past the last control	Continue panel navigation

The table lists the common wrapper's main props. See the package type declarations for the full types.