Pin Button — Demo

Hover the button, click to toggle, and switch your OS or browser theme to see all four requirements in action.

1. The component default state

Starts in unpinned as specified. Click to toggle.

2. Programmatic control

The product team can set the state at any time without a user click — e.g. to restore a saved session.

3. Visibility & layout integrity

Hiding the button removes it from layout cleanly — its neighbour should slide left, not leave a gap.

← neighbour element

4. Event log

Separate pin and unpin events fire on every transition — whether from user click or programmatic set. 

(no events yet)

Theme

The button automatically adapts via prefers-color-scheme. Toggle your OS/browser theme to test — no reload needed.