Skip to content

Trash Buttons

scenerystack/scenery-phet has three RectangularPushButton subclasses built around the same trash-can Path (trashShape), differing in whether a curved "move to" arrow is added and how muted the styling is. All are one-shot action buttons — pressing one removes or discards something, they hold no toggle state.

ts
import { MoveToTrashButton, TrashButton } from 'scenerystack/scenery-phet';

A minimal example

ts
const moveToTrashButton = new MoveToTrashButton( {
  arrowColor: 'blue',
  listener: () => {
    particlesProperty.value = [];
  },
  tandem: tandem.createTandem( 'moveToTrashButton' )
} );

const trashButton = new TrashButton( {
  listener: () => {
    selectedItemProperty.value = null;
  },
  tandem: tandem.createTandem( 'trashButton' )
} );

The family

ClassIconNotable optionsTypical use
MoveToTrashButtonTrash can plus a curved arrow pointing into it (arrowColor, default 'black'; iconScale, default 0.46)arrowColor lets the arrow be color-coded to the thing being deleted (e.g. match a particle's color)"Send this specific thing to the trash," where the arrow communicates moving something rather than an instantaneous delete
MoveToTrashLegendButtonSame icon as MoveToTrashButton (it's a direct subclass)Muted, flat styling: baseColor: 'rgb( 230, 230, 240 )', buttonAppearanceStrategy: ButtonNode.FlatAppearanceStrategy, smaller cornerRadius/margins/iconScaleAppearing inside a legend or as part of a bar-chart label, where a bold yellow 3D button would be visually too loud
TrashButtonPlain trash can only, no arrow (iconOptions, default { scale: 0.95, fill: 'black' })Simplest of the three — just the canA direct "delete" action where the "moving into the trash" metaphor of the arrow isn't needed

MoveToTrashButton and TrashButton both default baseColor to PhetColorScheme.BUTTON_YELLOW (inherited from RectangularPushButtonOptions, not overridden); MoveToTrashLegendButton overrides it to a muted gray-blue since it's meant to sit quietly inside other content.

Pick the icon based on whether "moving" is meaningful

Use MoveToTrashButton when the action reads as relocating a specific object (a draggable item, a data point) into a trash can — the arrow reinforces that. Use plain TrashButton for a generic "delete/clear" action where there's nothing being visually "moved." Reach for MoveToTrashLegendButton only when the button itself is a label inside a legend, not a primary interactive control.