Hudini Flat Text Button Component

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

Flat Text Button Component

Interactive flat 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 - Background 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,
    FlatTextButton
} 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 FlatTextButton({
            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 FlatTextButton({
            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);
    }
}