FloatingBar

A companion bar that floats above the sheet and follows it during drag. It automatically fades and slides away as the sheet expands.

Basic usage

Place FloatingBar as a sibling of Content inside the Portal. It automatically positions itself above the sheet.

<BottomSheet.Root open={open} onOpenChange={setOpen}>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Handle />
      {/* Sheet content */}
    </BottomSheet.Content>

    <BottomSheet.FloatingBar gap={12}>
      <div className="flex gap-2">
        <button>Favorite</button>
        <button>Share</button>
        <button>Save</button>
      </div>
    </BottomSheet.FloatingBar>
  </BottomSheet.Portal>
</BottomSheet.Root>

Props

<BottomSheet.FloatingBar
  gap={16}                // space above the sheet (px)
  hideWhileDragging       // hide during drag
  fadeStartPercent={50}   // start fading at 50% viewport
  fadeEndPercent={65}     // fully faded at 65% viewport
>
  {/* Actions */}
</BottomSheet.FloatingBar>

Prop	Type	Default	Description
`gap`	number	16	Space between bar and sheet (px)
`hideWhileDragging`	boolean	false	Hide during drag interaction
`fadeStartPercent`	number	50	Viewport % to start fade
`fadeEndPercent`	number	65	Viewport % to finish fade

Use cases

Action buttons (favorite, share, save) for a detail sheet
A search bar above a results sheet
Navigation controls for a map sheet