ExpandCollapseButton

ExpandCollapseButton (from scenerystack/sun) is a small square button that shows a + or - symbol and toggles a Property<boolean> — it's a thin, specialized wrapper around BooleanRectangularToggleButton with the plus/minus content, coloring (green when collapsed, orange when expanded), and aria-expanded PDOM attribute built in. AccordionBox constructs one of these internally for its own expand/collapse control (via its expandCollapseButtonOptions) — reach for ExpandCollapseButton directly only when you want that exact plus/minus affordance somewhere other than an AccordionBox title bar.

import { ExpandCollapseButton } from 'scenerystack/sun';
import { BooleanProperty } from 'scenerystack/axon';

const expandedProperty = new BooleanProperty( true );

const button = new ExpandCollapseButton( expandedProperty, {
  sideLength: 24
} );

Pressing the button flips expandedProperty.value; the button's fill and +/- symbol update automatically, from any source that changes the Property, not just from a button press.

Options

Option	Default	Effect
sideLength	25	Length of one side of the square button; the +/- symbol and margins scale proportionally
touchAreaXDilation / touchAreaYDilation	5 / 5	Expand the touch-friendly hit area beyond the visual bounds
stroke	'black'	Outline color of the square button

ExpandCollapseButtonOptions otherwise accepts the same BooleanRectangularToggleButtonOptions as documented in Toggle Buttons, minus cornerRadius/xMargin/yMargin/buttonAppearanceStrategy — those four are fixed internally so the plus/minus symbol always renders correctly relative to sideLength.

It's exactly what AccordionBox uses under the hood

If you're building a custom expandable panel that isn't quite an AccordionBox (e.g. different layout for the title/content), you can drop in an ExpandCollapseButton bound to your own expandedProperty and get the same visual language users already recognize from every AccordionBox in the sim, without reimplementing the plus/minus icon yourself.