Button

<Button onPress> is the game’s one button: a glass surface around a word or one icon. It fires onPress on a click, so a player can press, slide off and cancel. For an action timed against the world, use Tap.

Its props are in Button.

variant picks the look. ButtonVariant.Glass, the default, is the glass over the world. ButtonVariant.Accent fills the button with the menu accent, for the one action a screen leads with, and ButtonVariant.Pane draws it on the menu’s pane, for a step back or a lesser choice. Both read the theme tokens, so a game that sets its accent sets its buttons with it. disabled dims the button, lands no press and takes it out of the Tab order, as a browser’s own disabled button. className goes on the button, and classNames names its parts, root and icon, as the theme page describes. style takes a colour or a place that comes from data, such as a rarity’s border colour or a tile’s place on a grid. keyShortcuts names the key that presses the button too, written as aria-keyshortcuts writes one, such as "R": the game binds the key, a screen reader announces it, and the engine knows a player reaches the button while a camera captures the cursor, as the Hud page says.

import { Button, ButtonVariant } from "@spawnite/engine";

export function RunOverActions({
    ready,
    onRetry,
    onLeave,
}: {
    ready: boolean;
    onRetry: () => void;
    onLeave: () => void;
}) {
    return (
        <>
            <Button variant={ButtonVariant.Pane} onPress={onLeave}>
                Leave
            </Button>
            <Button
                variant={ButtonVariant.Accent}
                disabled={!ready}
                onPress={onRetry}
            >
                Again
            </Button>
        </>
    );
}

import { Button, Hud, Icon, Panel, Slot, useScenes } from "@spawnite/engine";

export function Menu() {
    const scenes = useScenes();

    return (
        <Hud>
            <Panel slot={Slot.Bottom}>
                <Button onPress={() => scenes.go("run")}>Play</Button>
                <Button label="Settings" onPress={() => scenes.go("settings")}>
                    <Icon name="settings" className="size-7" />
                </Button>
            </Panel>
        </Hud>
    );
}