Hudini Icon Button Component

An interactive circular icon button with hover and click animations, built on top of phaser-wind and font-awesome-for-phaser.

Icon Button Component

An interactive circular icon button with hover and click animations, built on top of phaser-wind and font-awesome-for-phaser.

Features

  • 🖱ī¸ Interactive: Hover scales the icon subtly, click animates press/release
  • 🎨 Customizable: Colors and sizes integrate with phaser-wind theme tokens
  • đŸŽ¯ Font Awesome Icons: Uses any icon from font-awesome-for-phaser
  • 🌑 Shadow Effects: Beautiful shadow effects for depth
  • ⚡ Performance: Optimized animations for smooth 60fps gameplay
  • 🔗 Event API: Direct access to interactive methods for advanced event handling

Props

  • icon - IconKey from font-awesome-for-phaser (e.g., 'heart', 'user', 'play')
  • size - Font size token ('xs', 'sm', 'base', 'lg', 'xl'...) or pixel value - default: 'base'
  • color - Base color from phaser-wind (except black/white) - default: 'gray'
  • onClick - Optional click handler function
  • borderRadius - Border radius token ('none', 'sm', 'md', 'lg', 'xl', 'full') or pixel value - default: 'full'

Methods

  • setButtonSize(size) - Change button size
  • setBorderRadius(radius) - Change border radius
  • interactive - Access to Phaser interactive methods (on, off, once, setInteractive)
  • getBounds() - Get button bounds for layout calculations

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    Color,
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    IconButton
} 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 heart icon button
        const heartButton = new IconButton({
            scene: this,
            x: this.cameras.main.centerX,
            y: 200,
            icon: 'heart',
            size: 'lg',
            color: 'red',
            onClick: () => {
                console.log('Heart clicked!');
            },
        });
        this.add.existing(heartButton);

        // Create a play icon button
        const playButton = new IconButton({
            scene: this,
            x: this.cameras.main.centerX - 100,
            y: 300,
            icon: 'play',
            size: 'xl',
            color: 'green',
            onClick: () => {
                console.log('Play clicked!');
            },
        });
        this.add.existing(playButton);
    }
}

Advanced Examples

Using Interactive API

const button = new IconButton({ 
    scene: this, 
    x: 100, 
    y: 100, 
    icon: 'play',
    onClick: () => console.log('Basic click')
});

// Access interactive methods directly
button.interactive.on('pointerover', () => console.log('Hover'));
button.interactive.on('pointerdown', () => console.log('Press'));
button.interactive.once('pointerup', () => console.log('Release once'));

Different Border Radius

// Circular button (default)
const circularBtn = new IconButton({
    scene: this,
    x: 200,
    y: 200,
    icon: 'solid/star',
    borderRadius: 'full',
});

// Rounded square button
const roundedBtn = new IconButton({
    scene: this,
    x: 300,
    y: 200,
    icon: 'solid/heart',
    borderRadius: 'lg',
});

Dynamic Updates

const button = new IconButton({
    scene: this,
    x: 400,
    y: 300,
    icon: 'gear',
    size: 'base',
});

// Update size dynamically
button.setButtonSize('xl');

// Update border radius
button.setBorderRadius('lg');