ArrowButton

ArrowButton (from scenerystack/sun) is a thin subclass of RectangularPushButton whose content is generated for you: a triangular arrow pointing 'up', 'down', 'left', or 'right'. It's the button NumberSpinner uses internally for its increment/decrement controls, and it's a reasonable choice any time you need a standalone "step" control with an arrow glyph rather than building your own Path and wiring it into RectangularPushButton yourself.

import { ArrowButton } from 'scenerystack/sun';
import { NumberProperty } from 'scenerystack/axon';
import { Range } from 'scenerystack/dot';

const range = new Range( 0, 20 );
const valueProperty = new NumberProperty( 10, { range: range } );

const decrementButton = new ArrowButton( 'left', () => {
  valueProperty.value = Math.max( range.min, valueProperty.value - 1 );
} );
const incrementButton = new ArrowButton( 'right', () => {
  valueProperty.value = Math.min( range.max, valueProperty.value + 1 );
} );

The constructor takes the direction and the fire callback directly (not through a listener option — ArrowButton sets options.listener internally, so content and listener are omitted from ArrowButtonOptions). Unlike a plain RectangularPushButton, ArrowButton enables fireOnHold by default, so press-and-hold repeats the action automatically.

Options

ArrowButtonOptions combines its own arrow-drawing options with RectangularPushButtonOptions (minus content/listener, which ArrowButton supplies):

Option	Default	Effect
arrowHeight	20	Arrow size from tip to base
arrowWidth	arrowHeight * √3 / 2	Width of the arrow's base
arrowFill / arrowStroke / arrowLineWidth	'black' / null / 1	Styling of the arrow Path
numberOfArrows	1	Draws several overlapping arrows (a ">>" fast-forward look) instead of one
arrowSpacing	-arrowHeight / 2	Offset between stacked arrows when numberOfArrows > 1
fireOnHold	true	Press-and-hold repeat firing is on by default (opposite of RectangularPushButton)
fireOnHoldDelay / fireOnHoldInterval	400 / 100	Timing (ms) for the repeat firing
cornerRadius	4	Smaller default than the general-purpose rectangular button
touchAreaXDilation / touchAreaYDilation	7 / 7	Expand the touch hit area beyond the small visual button

Pass the direction and callback positionally, not as options

ArrowButton's constructor is new ArrowButton( direction, callback, options? ) — direction and the fire callback aren't part of the options object the way listener is for RectangularPushButton.