Flip Coin

buttonhtmlreactvue

Live

Rendered live with React 19.2.7

flip-coin.tsxplain css only

import './flip-coin.css';

interface FlipCoinProps {
  label: string;
  disabled?: boolean;
}

export function FlipCoin({ label, disabled = false }: FlipCoinProps) {
  return (
    <button className="flip-coin" type="button" disabled={disabled || undefined}>
      <span className="flip-coin__face flip-coin__face--front">{label}</span>
      <span className="flip-coin__face flip-coin__face--back" aria-hidden="true">
        {label}
      </span>
    </button>
  );
}

dependencies

react@19.2.7the dialect you are reading

Built on Astro: the stage mounts the exhibit's actual React or Vue file as a live island. Pick the framework and the stage, the code and the dependency list agree.

The button has two faces and no memory: hover turns it to the outlined back face at a half-turn, press flips harder and lifts. backface-visibility hides whichever side faces away.

The part that matters is invisible: both faces carry text, and two texts would mean two names, so the back face is aria-hidden and a screen reader hears one label. A flip is a visual pun — the semantics must not flip with it.