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.
import { EraserButton } from 'scenerystack/scenery-phet';A minimal example
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.
| Option | Default | Effect |
|---|---|---|
iconWidth | 20 | Width the eraser icon is scaled to (height follows from the image's aspect ratio) |
baseColor | PhetColorScheme.BUTTON_YELLOW | Overridable, 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.