Skip to content

EraserButton

EraserButton (from scenerystack/scenery-phet) is a RectangularPushButton preloaded with an eraser icon (an Image node built from an SVG asset baked into scenery-phet, not a Shape-based icon) and PhET's standard yellow button color. Use it for "clear" actions — wiping a drawing, clearing accumulated data points, removing user-placed objects — that are narrower in scope than a full ResetAllButton, which resets the entire screen.

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

A minimal example

ts
const clearButton = new EraserButton( {
  listener: () => {
    pointsProperty.reset();
  },
  tandem: tandem.createTandem( 'eraserButton' )
} );

Options

EraserButtonOptions adds one option on top of the same RectangularPushButtonOptions every rectangular push button accepts (listener, xMargin/yMargin, fireOnHold, enabledProperty, touchAreaXDilation/touchAreaYDilation, …) — note that content is fixed and not settable, since the icon is what defines this button.

OptionDefaultEffect
iconWidth20Width the eraser icon is scaled to (height follows from the image's aspect ratio)
baseColorPhetColorScheme.BUTTON_YELLOWOverridable, but yellow is the PhET-standard color for this button

Keep the yellow base color unless there's a strong reason not to

EraserButton's default baseColor matches PhetColorScheme.BUTTON_YELLOW — the same convention BackButton uses. Sims that recolor individual buttons ad hoc make the UI harder to scan at a glance; prefer leaving PhET's standard button colors alone and reserve custom colors for content that specifically needs to stand out.