Skip to content

StepForwardButton

StepForwardButton (from scenerystack/scenery-phet) is a RoundPushButton showing a bar-plus-triangle "step forward" icon, for advancing a paused model by one fixed time increment. It's a thin subclass of the shared, also-exported StepButton with direction: 'forward' fixed — TimeControlNode includes one by default, but it's also usable standalone wherever a sim needs frame-by-frame stepping without a full play/pause control strip.

ts
import { StepForwardButton } from 'scenerystack/scenery-phet';

A minimal example

ts
const stepForwardButton = new StepForwardButton( {
  listener: () => {
    model.step( 0.1 );
  },
  enabledProperty: DerivedProperty.not( isPlayingProperty ),
  tandem: tandem.createTandem( 'stepForwardButton' )
} );

Options

StepForwardButtonOptions is StepButtonOptions with direction fixed to 'forward' — the underlying content icon is likewise fixed and not settable directly.

OptionDefaultEffect
radius20Button radius (independent of SceneryPhetConstants, unlike the play/pause button's radius)
iconFill'black'Fill color of the bar-and-triangle icon
fireOnHoldtruePress-and-hold repeats the step, matching the default fireOnHold/fireOnHoldDelay/fireOnHoldInterval behavior of any RoundPushButton
soundPlayerthe shared 'stepForward' sound playerOverridable if a different button in the same sim needs a distinct sound
enabledPropertyInherited from RoundPushButton; there is no dedicated isPlayingProperty option, so disabling while the sim runs is the caller's responsibility (see tip below)

There is no built-in isPlayingProperty option — wire enabledProperty yourself

StepForwardButton has no special awareness of play/pause state. TimeControlNode achieves "step buttons disable while playing" by deriving enabledProperty: DerivedProperty.not( isPlayingProperty ) internally (via PlayPauseStepButtonGroup) and passing it in as an ordinary option. Do the same if you use StepForwardButton standalone, outside TimeControlNode.