Hudini Alert Component

Static notification banner with semantic variants (success / error / warning / info / neutral), optional icons and click handler — the content half of a daisyUI-style toast.

Alert Component

A static (or optionally clickable) notification banner. Same visual language as a filled TextButton — colored fill, outlined text/icon — but without hover/click animations. Semantic variants come with sensible default colors and icons (daisyUI parity).

Alert is intentionally content-only. For auto-dismiss / timing / entry animation, wrap it in a Toast (separate component, later).

Features

  • 🎨 Semantic variants: success, error, warning, info, neutral
  • đŸŽ¯ Default icon per variant: check for success, X for error, etc — omit or override at will
  • đŸ–ŧī¸ Left + right icons: same API as TextButton (leftIcon / rightIcon)
  • 🖱ī¸ Optional onClick: cursor becomes pointer, fires callback (great for "close" affordance)
  • 🧱 Composes: sizes itself so Row/Column/Stack measures it correctly

Props

  • text - Message shown in the alert
  • variant - 'info' (default), 'success', 'error', 'warning', 'neutral'
  • color - Override the variant's background color
  • textColor - Text/icon color (default 'white')
  • leftIcon - Font Awesome icon. Omit to use the variant default; pass null to explicitly disable it
  • rightIcon - Optional Font Awesome icon on the right (e.g. 'xmark' for a "close" hint)
  • fontSize, font, padding, borderRadius - Sizing/tokens
  • onClick - Optional click handler; when set the alert becomes interactive

Live Example

Loading game...

Usage Example

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

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

class AlertDemoScene extends Phaser.Scene {
    create(): void {
        const hudini = withHudini<Theme>(this);
        const { pw } = hudini;

        // 1. Semantic variants — default color + icon per variant
        new Alert({
            scene: this, x: 400, y: 100,
            variant: 'success',
            text: 'Player saved!',
        });

        // 2. Override the variant's icon or color
        new Alert({
            scene: this, x: 400, y: 200,
            variant: 'warning',
            text: 'Low health',
            leftIcon: 'heart-crack',   // override the default
            rightIcon: 'xmark',         // "close" hint
        });

        // 3. Clickable
        const alert = new Alert({
            scene: this, x: 400, y: 300,
            variant: 'error',
            text: 'Tap to dismiss',
            rightIcon: 'xmark',
            onClick: () => alert.destroy(),
        });
    }
}