diff --git a/app/src/organisms/QuickTransferFlow/index.tsx b/app/src/organisms/QuickTransferFlow/index.tsx
index 48a0a4026d07..b36a0839a58b 100644
--- a/app/src/organisms/QuickTransferFlow/index.tsx
+++ b/app/src/organisms/QuickTransferFlow/index.tsx
@@ -1,7 +1,12 @@
import * as React from 'react'
import { useHistory } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
-import { Flex, StepMeter, SPACING } from '@opentrons/components'
+import {
+ Flex,
+ StepMeter,
+ SPACING,
+ POSITION_STICKY,
+} from '@opentrons/components'
import { SmallButton } from '../../atoms/buttons'
import { ChildNavigation } from '../ChildNavigation'
import { CreateNewTransfer } from './CreateNewTransfer'
@@ -87,6 +92,9 @@ export const QuickTransferFlow = (): JSX.Element => {
{modalContent == null ? (
diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx
index 14bbf48c6caa..ec8ec83b892a 100644
--- a/components/src/atoms/StepMeter/index.tsx
+++ b/components/src/atoms/StepMeter/index.tsx
@@ -5,13 +5,15 @@ import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
import { COLORS } from '../../helix-design-system'
import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
-interface StepMeterProps {
+import type { StyleProps } from '@opentrons/components'
+
+interface StepMeterProps extends StyleProps {
totalSteps: number
currentStep: number | null
}
export const StepMeter = (props: StepMeterProps): JSX.Element => {
- const { totalSteps, currentStep } = props
+ const { totalSteps, currentStep, ...styleProps } = props
const progress = currentStep != null ? currentStep : 0
const percentComplete = `${
// this logic puts a cap at 100% percentComplete which we should never run into
@@ -21,7 +23,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
}%`
const StepMeterContainer = css`
- position: ${POSITION_RELATIVE};
+ position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
height: ${SPACING.spacing4};
background-color: ${COLORS.grey30};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
@@ -41,7 +43,11 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
`
return (
-
+
)