Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Drawer

    A panel that slides in from the edge or the bottom to show details, filters or a sub-form without leaving the page.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Drawer } from '@bigbang/ui';
    Source
    Drawer.tsx
    Storybook
    Drawer · Playground

    Drawer is in the @bigbang/ui package.

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

    <Drawer
      trigger={<Button variant="secondary">Open panel</Button>}
      title="Panel title"
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      Panel content
    </Drawer>;

    The part prop types are exported too: DrawerCloseProps.

    Props

    Section titled “Props”
    titleRequired
    Description
    Heading of the panel; it names the drawer for screen readers. Required.
    Type
    ReactNode
    description
    Description
    One sentence under the title; read together with the title.
    Type
    ReactNode
    children
    Description
    Content of the panel body. It scrolls on its own; the header and footer stay in place.
    Type
    ReactNode
    trigger
    Description
    The element that opens the drawer, usually a Button. Leave it out to control the drawer with open.
    Type
    ReactElement
    side
    Description
    Edge the panel comes from. start and end follow the text direction; below 640 px of viewport width they become bottom automatically.
    Type
    DrawerSide
    Default
    'end'
    size
    Description
    Width of a start or end drawer: 360, 480 or 640 px. A top or bottom sheet spans the viewport width and grows with its content up to 320 px (sm) or 560 px (md); lg takes the full height.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    modal
    Description
    Traps focus and makes the page inert. Turn it off for a panel people use next to the page, such as filters; then focus is not trapped and the page stays usable.
    Type
    boolean
    Default
    true
    open
    Description
    Controlled open state. Pass it with onOpenChange.
    Type
    boolean
    defaultOpen
    Description
    Open state on first render when the drawer is uncontrolled.
    Type
    boolean
    Default
    false
    onOpenChange
    Description
    Called with the new open state when the trigger, Escape, an outside press, a swipe or a close button changes it.
    Type
    (open: boolean) => void
    closeLabel
    Description
    Accessible name of the close button. Defaults to the ui.dialog.close library string ("Kapat" or "Close").
    Type
    string
    handle
    Description
    Shows a grab bar at the top of a bottom sheet. Decorative: the sheet can be swiped anywhere and always has a close button. By default it shows when the sheet has snap points, the case where dragging resizes it.
    Type
    boolean
    snapPoints
    Description
    Heights a bottom sheet rests at, as fractions of the viewport (0-1) or CSS lengths such as '320px'; swiping moves between them. Ignored by the other sides.
    Type
    DrawerSnapPoint[]

    Parts

    Section titled “Parts”
    • Drawer.Close: wraps one Button and closes the drawer when it is pressed.
    • Parts for a layout the props do not cover: Drawer.Root (the Drawer props; children instead of title, description and footer), Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body, Drawer.Footer. Every drawer has one Drawer.Title.

    Data attributes

    Section titled “Data attributes”
    • data-component="drawer", data-side (end, start, top or bottom), data-size: on the panel.
    • data-part: backdrop, handle, header, body, footer.
    • data-swiping, data-swipe-direction, data-starting-style, data-ending-style: from Base UI.