Hesoyam

Sheet

A panel that slides in from an edge. Built on Dialog, so this port defaults to modal.

Reka Dialog sets modal to true. Pass :modal="false" only when the page behind must stay interactive.

Default

Trigger with as-child so the Button stays the focus target. Content defaults to the right edge.


        

          1
          
          <Sheet>
        

          2
          
            <SheetTrigger as-child>
        

          3
          
              <Button size='small'>Open Sheet</Button>
        

          4
          
            </SheetTrigger>
        

          5
          
            <SheetContent>
        

          6
          
              <SheetHeader>
        

          7
          
                <SheetTitle>Deployment Details</SheetTitle>
        

          8
          
                <SheetDescription>Inspect the latest production deploy.</SheetDescription>
        

          9
          
              </SheetHeader>
        

          10
          
              <SheetFooter>
        

          11
          
                <SheetClose as-child>
        

          12
          
                  <Button size='small' variant='secondary'>Close</Button>
        

          13
          
                </SheetClose>
        

          14
          
                <Button size='small'>Next</Button>
        

          15
          
              </SheetFooter>
        

          16
          
            </SheetContent>
        

          17
          
          </Sheet>

Side

side is top, right, bottom, or left. Pick from the trigger: a row inspector from the right, filters from the left.


        

          1
          
          <Sheet>
        

          2
          
            <SheetTrigger as-child>
        

          3
          
              <Button size='small'>Open right</Button>
        

          4
          
            </SheetTrigger>
        

          5
          
            <SheetContent side='right'>
        

          6
          
              <SheetHeader>
        

          7
          
                <SheetTitle>Sheet from right</SheetTitle>
        

          8
          
              </SheetHeader>
        

          9
          
            </SheetContent>
        

          10
          
          </Sheet>

Close control

show-close-button is on by default. Turn it off when the footer already owns dismiss.


        

          1
          
          <SheetContent :show-close-button='false'>
        

          2
          
            <SheetHeader>
        

          3
          
              <SheetTitle>Member Profile</SheetTitle>
        

          4
          
            </SheetHeader>
        

          5
          
            <SheetFooter>
        

          6
          
              <SheetClose as-child>
        

          7
          
                <Button size='small' variant='secondary'>Close</Button>
        

          8
          
              </SheetClose>
        

          9
          
            </SheetFooter>
        

          10
          
          </SheetContent>

No overlay

no-overlay skips the dimmer when the sheet should sit on the live page.


        

          1
          
          <SheetContent no-overlay>
        

          2
          
            <SheetHeader>
        

          3
          
              <SheetTitle>Quick Filter</SheetTitle>
        

          4
          
            </SheetHeader>
        

          5
          
          </SheetContent>

Best practices

  • Sheet is associated context: a deploy, a member, a log row. A blocking decision is Modal. A mobile-only bottom panel is Drawer.
  • Do not confirm a delete in a sheet. Severity needs a modal that owns the screen.
  • Keep side stable for a given flow. Do not flip edges mid-session.
  • Title names the entity (Deployment Details), not the page action. Do not repeat the page header inside.
  • Always ship a visible close — the corner icon or a footer SheetClose. Honor Escape.
  • Focus returns to the trigger on close. Do not steal it to the first row of the table.