Drawer

When to use

Use Drawer when people look at a record’s details, choose filters or fill a short sub-form without leaving the list or page.

When not to use

• For one decision or a short task: Use Dialog.
• To confirm an irreversible action: Use AlertDialog.
• For long, multi-step flows: Open a separate page.
• For a navigation menu: Use the app shell navigation component.

Anatomy

Open panel

LightDark

Copy code

import { Button, Drawer } from '@bigbang/ui';

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Open panel</Button>}
      title="Panel title"
      description="Panel description goes here."
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      Panel content goes here. The page stays visible behind it.
    </Drawer>
  );
}

1. Backdrop: Dims the page for a modal drawer; clears while swiping.
2. Panel: Raised surface; a side drawer has 14 px inner corners, a bottom sheet 14 px top corners and a top sheet 14 px bottom corners; the edge against the screen is square; a thin overlay hairline and a shadow.
3. Handle: Bottom sheet only, with handle; shows it can be swiped.
4. Title and description.
5. Body: Scrolls on its own.
6. Actions: Stacked full width, fixed at the bottom.
7. Close button.

Behaviour

• Opens from its trigger or through the controlled open prop; focus moves to the first element in the body.
• A modal drawer traps focus and makes the page inert; with modal={false} the page stays usable.
• Escape, a press on the backdrop, the close button, Drawer.Close or a swipe towards the edge close it; focus returns to the trigger.
• While swiping, the panel follows the pointer and the backdrop clears; on release it closes or settles back.
• Below 640 px every drawer becomes a bottom sheet.

Choosing a side

• end for details and sub-forms; start for navigation or a choice that belongs at the start of the page; top for a short panel that drops down, such as a search.

Guidelines

• Keep the panel related to an item on the page; name that item in the title.
• Prefer modal={false} and the sm width for filters.
• Ask for confirmation when closing would lose unsaved changes.
• Do not open a drawer from a drawer.

Content

Turkish	English
Panel başlığı	Panel title
Uygula	Apply
Sıfırla	Reset

Related components

• Dialog: A centred modal window.
• AlertDialog: To confirm on close.