Hudini Text Button Component

Interactive button with text content and hover effects, built with PhaserWind theming.

Text Button Component

Interactive button with text content and hover effects, built with PhaserWind theming system.

Features

  • 🖱ī¸ Interactive: Click and hover effects with smooth transitions
  • 🎨 Customizable: Extensive styling options with PhaserWind tokens
  • 📱 Responsive: Adapts to different screen sizes and orientations
  • ⚡ Performance: Optimized for 60fps gameplay

Props

  • text - Button text content
  • color - Button color token or CSS color
  • textColor - Text color token or CSS color
  • borderRadius - Border radius token or pixel value
  • padding - Internal padding using spacing tokens
  • fontSize - Text size using typography tokens

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    Color,
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    TextButton
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class ButtonDemoScene extends SceneWithHudini<Theme> {
    constructor() {
        super('button-demo');
    }

    create(): void {
        const { pw } = this.hudini;
        this.cameras.main.setBackgroundColor(pw.color.slate(900));

        // Create a primary button
        const primaryButton = new TextButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY - 50,
            text: 'Primary Button',
            color: 'blue-500',
            textColor: 'white',
            borderRadius: 'md',
            padding: '4',
        });
        this.add.existing(primaryButton);

        // Create a secondary button
        const secondaryButton = new TextButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY + 50,
            text: 'Secondary Button',
            color: 'gray-200',
            textColor: 'gray-800',
            borderRadius: 'lg',
            padding: '6',
        });
        this.add.existing(secondaryButton);
    }
}