gra-ui

Component

IndecisiveButton

It considers every option while hovered or focused, then commits to whichever label happens to be visible when clicked.

01 / Preview

Try it yourself.

Preview Interactive

Hover, focus, then click. No pressure.

Controls

02 / Usage

Put it somewhere.

example.tsxTSX
import { IndecisiveButton } from "gra-ui";
import "gra-ui/styles.css";

export function Example() {
  return (
    <IndecisiveButton
      choices={["Ship it", "Wait", "Ship it anyway"]}
      interval={900}
      onDecision={(choice) => console.log(choice)}
    >
      Decide
    </IndecisiveButton>
  );
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe stable label shown while the button is idle.
choicesreadonly string[]Labels cycled while the button is active.
intervalnumberDelay between choices. Defaults to 900 ms.
onDecision(choice, index, event) => voidCalled with the visible choice on click.
...propsButtonPropsButton props, except asChild and children, are forwarded.