Drawer

The Drawer component displays content in a slide-in panel from the right edge of the screen. It provides a flexible way to create side panels with backdrop, positioning, and focus management.

Demo

React

Vue

Usage

React

import { useState } from 'react';
import {
  Button,
  Drawer,
  useDisclosure,
} from '@fintech-sandpit/ui/react';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();

return (
  <>
    <Button
      colorScheme="primary"
      onClick={onOpen}
    >
      Open
    </Button>

    <Drawer.Root
      open={open}
      onOpen={onOpen}
      onClose={onClose}
    >
      <Drawer.Content>
        <Drawer.CloseTrigger />

        <Drawer.Header>
          Drawer Title
        </Drawer.Header>

        <Drawer.Body>
          Drawer Body Text
        </Drawer.Body>

        <Drawer.Footer>
          <Button onClick={onClose}>
            Close Drawer
          </Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  </>
);

Vue

<script setup lang="ts">
import {
  Button,
  Drawer,
  useDisclosure,
} from '@fintech-sandpit/ui/vue';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();
</script>

<template>
    <Button
      color-scheme="primary"
      @click="onOpen"
    >
      Open
    </Button>

  <Drawer.Root
    :open="open"
    @open="onOpen"
    @close="onClose"
  >
    <Drawer.Content>
      <Drawer.CloseTrigger />

      <Drawer.Title>
        Drawer Title
      </Drawer.Title>

      <Drawer.Body>
        Drawer Body Text
      </Drawer.Body>

      <Drawer.Footer>
        <Button @click="onClose">
          Close Drawer
        </Button>
      </Drawer.Footer>
    </Drawer.Content>
  </Drawer.Root>
</template>

Props

Drawer Root Props

React

Name	Type	Default	Description
open	boolean	false	Whether the drawer is open (controlled)
defaultOpen	boolean	false	Whether the drawer is open by default (uncontrolled)
modal	boolean	true	Whether the drawer is modal.2
closeOnInteractOutside	boolean	true	Whether to close on outside interaction
closeOnEscape	boolean	true	Whether to close on Escape key

Vue

Name	Type	Default	Description
model-value	boolean	false	Whether the drawer is open (controlled) 1
default-open	boolean	false	Whether the drawer is open by default (uncontrolled)
modal	boolean	true	Whether the drawer is modal. 2
close-on-interact-outside	boolean	true	Whether to close on outside interaction
close-on-escape	boolean	true	Whether to close on Escape key

Drawer Content Props

React

Name	Type	Default	Description
placement	DrawerPlacement	right	The placement of the drawer
container	RefObject<HTMLElement>	—	The container to render the drawer in

Vue

Name	Type	Default	Description
placement	DrawerPlacement	right	The placement of the drawer
container	string | RendererElement	body	The container to render the drawer in

1. Can be used with the v-model directive for two-way binding.
2. When true, focus is trapped inside the drawer and interaction with elements outside is blocked. When false, users can interact with other page elements while the drawer is open.

Events

React

Name	Arguments	Description
onOpen	() => void	Callback fired when drawer is opened
onClose	() => void	Callback fired when drawer is closed

Vue

Name	Payload	Description
open	void	Event emitted when drawer is opened
close	void	Event emitted when drawer is closed

Types

type DrawerPlacement = 'top' | 'bottom' | 'left' | 'right'