Hesoyam

Drawer

A bottom sheet that takes over a small viewport. Bind show and dismiss together.

This port is a bottom sheet at every breakpoint so the API is visible here. In product chrome, pair it with Modal or Sheet on desktop instead of forcing a sheet on a wide screen.

Default

v-model:show drives visibility. Overlay tap, Escape, and a downward drag on the handle all dismiss.


        

          1
          
          <Button size="small" @click="open = true">Open</Button>
        

          2
          
          <Drawer v-model:show="open">
        

          3
          
            <div class="flex flex-col items-center gap-2 px-12 pb-12">
        

          4
          
              <DrawerTitle>Filter Logs</DrawerTitle>
        

          5
          
              <p class="text-center text-[14px] text-[var(--ds-gray-900)]">
        

          6
          
                Narrow the stream to a host, status, or time range.
        

          7
          
              </p>
        

          8
          
            </div>
        

          9
          
          </Drawer>

Height

height is pixels. customHeight accepts a number or a CSS length when the default frame clips the primary action.


        

          1
          
          <Drawer v-model:show="heightOpen" :height="200">
        

          2
          
            <div class="flex flex-col items-center gap-2 px-12 pb-8">
        

          3
          
              <DrawerTitle>Quick Filters</DrawerTitle>
        

          4
          
              <p class="text-center text-[14px] text-[var(--ds-gray-900)]">
        

          5
          
                A short sheet. Keep Cancel and the primary action above the fold.
        

          6
          
              </p>
        

          7
          
            </div>
        

          8
          
          </Drawer>

Vertical scroll

vertical-scroll confines overflow to the body so the page behind the sheet does not move.


        

          1
          
          <Drawer v-model:show="scrollOpen" :height="320" vertical-scroll>
        

          2
          
            <div class="flex flex-col gap-3 px-6 pb-8">
        

          3
          
              <DrawerTitle>Deployment Details</DrawerTitle>
        

          4
          
              <p v-for="n in 12" :key="n" class="text-[13px] text-[var(--ds-gray-900)]">
        

          5
          
                Event {{ n }} — replica health and request volume for this window.
        

          6
          
              </p>
        

          7
          
            </div>
        

          8
          
          </Drawer>

Best practices

  • Drawer is a mobile sheet: one form, a filter set, or a single primary action plus Cancel. Wide viewports should open Modal or Sheet instead.
  • Do not confirm deletes or revokes here. The overlay is a dim, not a hard block — use Modal when the action is destructive.
  • DrawerTitle names the view in Title Case (Filter Logs, Deployment Details), not the page heading. Body copy stays sentence case.
  • Leave tap-outside, Escape, and swipe-down dismiss on. Disable them only while a form is dirty and you need to confirm discard.
  • Pass vertical-scroll when the body can overflow the frame. Cap height with height or custom-height only if the CTA would otherwise sit below the fold.
  • onDismiss and @dismiss are the same close path as v-model:show. Prefer the model in new Vue code.