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
  • variant - 'filled' (default) or 'outline' — daisyUI-style visual variants
  • leftIcon / rightIcon - Optional Font Awesome icons (IconKey) shown on either side of the text
  • iconGap - Space between icon and text (defaults to ~35% of the font size)

Live Example

Loading game...

Usage Example

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

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

class ButtonDemoScene extends Phaser.Scene {
    constructor() {
        super('button-demo');
    }

    create(): void {
        const hudini = withHudini<Theme>(this);
        const { pw } = 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);

        // Create an outline button (daisyUI-style)
        const outlineButton = new TextButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY + 130,
            text: 'Outline Button',
            color: 'blue-500',
            borderRadius: 'md',
            padding: '4',
            variant: 'outline',
        });
        this.add.existing(outlineButton);

        // Button with a left icon — < home > Home
        const homeButton = new TextButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY + 210,
            text: 'Home',
            color: 'blue-500',
            leftIcon: 'house',
        });
        this.add.existing(homeButton);
    }
}