Class Button

Interactive button component with customizable appearance for different states. Supports bitmap fonts and regular text, backgrounds with colors or textures, and automatic state management for hover and pressed interactions.

Example

const button = new Button('Click Me', {
  font: 'myFont',
  useBitmapText: true,
  defaultStyle: {
    width: 120,
    height: 40,
    backgroundColor: 0x4a90d9,
    textColor: 0xffffff,
  },
  hoverStyle: {
    width: 120,
    height: 40,
    backgroundColor: 0x357abd,
    textColor: 0xffffff,
  },
});

button.onClick(() => console.log('Button clicked!'));
stage.addChild(button);

Hierarchy (View Summary)

PixiElement
- Button

Index

Constructors

constructor

Accessors

btnState currentStyleState doubleclickHandler dragendHandler dragmoveHandler dragstartHandler pointerdownHandler pointermoveHandler pointeroutHandler pointeroverHandler pointertapHandler pointerupHandler pointerupoutsideHandler text textSpriteUtilized

Constructors

constructor

new Button(text: string, styleOptions: ButtonStyleOptions): Button
Creates a new Button instance.
Parameters
- text: string
  The label text to display on the button
- styleOptions: ButtonStyleOptions
  Configuration options for button appearance
Returns Button
Overrides PixiElement.constructor
- Defined in Components/Button.ts:105

Properties

alpha

alpha: number

angle

angle: number

buttonMode

buttonMode: boolean

children

children: DisplayObject[]

cursor

cursor: string

`Optional`destroyed

destroyed?: boolean

eventMode

eventMode: EventMode

height

height: number

hitArea

hitArea:
    | Rectangle
    | RoundedRectangle
    | { contains(x: number, y: number): boolean }
    | null

inDrag

inDrag: boolean = false

Indicates whether the element is currently being dragged

interactive

interactive: boolean

interactiveChildren

interactiveChildren: boolean

isMouseOver

isMouseOver: boolean = false

Indicates whether the mouse/pointer is currently over this element

mask

mask: DisplayObject | null

maxSwipeTimeout

maxSwipeTimeout: number = 300

Maximum time in milliseconds for a gesture to be considered a swipe

minSwipeDistance

minSwipeDistance: number = 200

Minimum distance in pixels for a gesture to be considered a swipe

parent

parent: Container | null

pivot

pivot: Point

position

position: Point

renderable

renderable: boolean

rotation

rotation: number

scale

scale: Point

sortableChildren

sortableChildren: boolean

visible

visible: boolean

width

width: number

worldTransform

worldTransform: {
    a: number;
    b: number;
    c: number;
    d: number;
    tx: number;
    ty: number;
}

x

x: number

y

y: number

`Static`recomputeDragScalePerMove

recomputeDragScalePerMove: boolean = true

When true (default), each window-level dragmove recomputes the canvas rect and renderer scale via getBoundingClientRect(). This makes drags survive mid-drag canvas resizes, DPR/monitor changes, and CSS-zoom animations without the cursor and element drifting apart.

Set to false to skip the per-move rect lookup (cache scale once at dragstart). Saves a couple getBoundingClientRect() calls per pointermove — measurable only at very high move rates or with thousands of concurrent draggables.

Accessors

btnState

set btnState(newState: BtnState): void
Parameters
- newState: BtnState
Returns void
- Defined in Components/Button.ts:118

currentStyleState

get currentStyleState(): ResolvedStyleState
Returns ResolvedStyleState
- Defined in Components/Button.ts:279

doubleclickHandler

set doubleclickHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.doubleclickHandler
- Defined in Element.ts:146

dragendHandler

set dragendHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.dragendHandler
- Defined in Element.ts:148

dragmoveHandler

set dragmoveHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.dragmoveHandler
- Defined in Element.ts:149

dragstartHandler

set dragstartHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.dragstartHandler
- Defined in Element.ts:147

pointerdownHandler

set pointerdownHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointerdownHandler
- Defined in Element.ts:138

pointermoveHandler

set pointermoveHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointermoveHandler
- Defined in Element.ts:142

pointeroutHandler

set pointeroutHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointeroutHandler
- Defined in Element.ts:143

pointeroverHandler

set pointeroverHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointeroverHandler
- Defined in Element.ts:141

pointertapHandler

set pointertapHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointertapHandler
- Defined in Element.ts:144

pointerupHandler

set pointerupHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointerupHandler
- Defined in Element.ts:139

pointerupoutsideHandler

set pointerupoutsideHandler(handler: PixiEventHandler): void
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.pointerupoutsideHandler
- Defined in Element.ts:140

text

set text(value: string): void
Sets the button label text.
Parameters
- value: string
  New text to display
Returns void
- Defined in Components/Button.ts:129

textSpriteUtilized

get textSpriteUtilized(): Text | BitmapTextLike | null
Returns Text | BitmapTextLike | null
- Defined in Components/Button.ts:209

Methods

addChild

addChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PixiElement.addChild
- Defined in global.d.ts:123

addChildAt

addChildAt<T extends DisplayObject>(child: T, index: number): T
Type Parameters
- T extends DisplayObject
Parameters
- child: T
- index: number
Returns T
Inherited from PixiElement.addChildAt
- Defined in global.d.ts:124

addElement

addElement(element: PixiElement): void
Adds an element to the internal elements array.
Parameters
- element: PixiElement
  The element to add
Returns void
Throws
Error if the element is not an instance of Element
Inherited from PixiElement.addElement
- Defined in Element.ts:205

addListener

addListener(event: string, fn: EventListener): this
Parameters
- event: string
- fn: EventListener
Returns this
Inherited from PixiElement.addListener
- Defined in global.d.ts:105

center

center(): void
Centers this element both horizontally and vertically within its parent container.

Returns void
Inherited from PixiElement.center
- Defined in Element.ts:195

centerX

centerX(): void
Centers this element horizontally within its parent container.

Returns void
Inherited from PixiElement.centerX
- Defined in Element.ts:177

centerY

centerY(): void
Centers this element vertically within its parent container.

Returns void
Inherited from PixiElement.centerY
- Defined in Element.ts:186

destroy

destroy(
    options?:
        | boolean
        | { baseTexture?: boolean; children?: boolean; texture?: boolean },
): void
Parameters
- Optionaloptions: boolean | { baseTexture?: boolean; children?: boolean; texture?: boolean }
Returns void
Inherited from PixiElement.destroy
- Defined in Element.ts:593

emit

emit(event: string, ...args: unknown[]): boolean
Parameters
- event: string
- ...args: unknown[]
Returns boolean
Inherited from PixiElement.emit
- Defined in global.d.ts:104

getBounds

getBounds(skipUpdate?: boolean): Rectangle
Parameters
- OptionalskipUpdate: boolean
Returns Rectangle
Inherited from PixiElement.getBounds
- Defined in global.d.ts:109

getChildAt

getChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PixiElement.getChildAt
- Defined in global.d.ts:130

getChildIndex

getChildIndex(child: DisplayObject): number
Parameters
- child: DisplayObject
Returns number
Inherited from PixiElement.getChildIndex
- Defined in global.d.ts:128

getGlobalPosition

getGlobalPosition(point?: Point, skipUpdate?: boolean): Point
Parameters
- Optionalpoint: Point
- OptionalskipUpdate: boolean
Returns Point
Inherited from PixiElement.getGlobalPosition
- Defined in global.d.ts:108

getLocalBounds

getLocalBounds(rect?: Rectangle): Rectangle
Parameters
- Optionalrect: Rectangle
Returns Rectangle
Inherited from PixiElement.getLocalBounds
- Defined in global.d.ts:110

off

off(event: string, fn?: EventListener, context?: unknown): this
Parameters
- event: string
- Optionalfn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PixiElement.off
- Defined in global.d.ts:102

on

on(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PixiElement.on
- Defined in global.d.ts:101

once

once(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PixiElement.once
- Defined in global.d.ts:103

onClick

onClick(handler: PixiEventHandler): void
Registers a handler for click/tap events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onClick
- Defined in Element.ts:239

onDoubleClick

onDoubleClick(handler: PixiEventHandler): void
Registers a handler for double-click events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onDoubleClick
- Defined in Element.ts:280

onDragEnd

onDragEnd(handler: PixiEventHandler): void
Registers a handler for drag end events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onDragEnd
- Defined in Element.ts:265

onDragMove

onDragMove(handler: PixiEventHandler): void
Registers a handler for drag move events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onDragMove
- Defined in Element.ts:272

onDragStart

onDragStart(handler: PixiEventHandler, hold?: number): void
Registers a handler for drag start events.
Parameters
- handler: PixiEventHandler
- Optionalhold: number
  Optional time in milliseconds the pointer must be held before triggering drag
Returns void
Inherited from PixiElement.onDragStart
- Defined in Element.ts:253

onHeldDown

onHeldDown(handler: PixiEventHandler, timeout: number): void
Registers a handler that fires after the element has been held down for a specified duration.
Parameters
- handler: PixiEventHandler
- timeout: number
Returns void
Inherited from PixiElement.onHeldDown
- Defined in Element.ts:244

onMouseDown

onMouseDown(handler: PixiEventHandler): void
Registers a handler for pointer down (mouse down / touch start) events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseDown
- Defined in Element.ts:221

onMouseMove

onMouseMove(handler: PixiEventHandler): void
Registers a handler for pointer move events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseMove
- Defined in Element.ts:236

onMouseOut

onMouseOut(handler: PixiEventHandler): void
Registers a handler for pointer out (mouse leave) events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseOut
- Defined in Element.ts:233

onMouseOver

onMouseOver(handler: PixiEventHandler): void
Registers a handler for pointer over (mouse enter) events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseOver
- Defined in Element.ts:230

onMouseUp

onMouseUp(handler: PixiEventHandler): void
Registers a handler for pointer up (mouse up / touch end) events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseUp
- Defined in Element.ts:224

onMouseUpOutside

onMouseUpOutside(handler: PixiEventHandler): void
Registers a handler for pointer up outside events.
Parameters
- handler: PixiEventHandler
Returns void
Inherited from PixiElement.onMouseUpOutside
- Defined in Element.ts:227

onSwipe

onSwipe(handler: SwipePowerHandler): void
Registers a handler for swipe gestures in any direction.
Parameters
- handler: SwipePowerHandler
  Callback function to execute on swipe, receives swipe power as parameter
Returns void
Inherited from PixiElement.onSwipe
- Defined in Element.ts:289

onSwipeDown

onSwipeDown(handler: SwipePowerHandler): void
Registers a handler for downward swipe gestures.
Parameters
- handler: SwipePowerHandler
Returns void
Inherited from PixiElement.onSwipeDown
- Defined in Element.ts:310

onSwipeUp

onSwipeUp(handler: SwipePowerHandler): void
Registers a handler for upward swipe gestures.
Parameters
- handler: SwipePowerHandler
Returns void
Inherited from PixiElement.onSwipeUp
- Defined in Element.ts:301

redraw

redraw(): void
Forces a complete redraw of the button including background and text.

Returns void
- Defined in Components/Button.ts:151

redrawBg

redrawBg(): void
Returns void
- Defined in Components/Button.ts:214

redrawText

redrawText(): void
Redraws just the text portion of the button.

Returns void
- Defined in Components/Button.ts:159

removeAllListeners

removeAllListeners(event?: string): this
Parameters
- Optionalevent: string
Returns this
Inherited from PixiElement.removeAllListeners
- Defined in global.d.ts:107

removeChild

removeChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PixiElement.removeChild
- Defined in global.d.ts:125

removeChildAt

removeChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PixiElement.removeChildAt
- Defined in global.d.ts:126

removeChildren

removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]
Parameters
- OptionalbeginIndex: number
- OptionalendIndex: number
Returns DisplayObject[]
Inherited from PixiElement.removeChildren
- Defined in global.d.ts:127

removeElement

removeElement(element: PixiElement): void
Removes an element from the internal elements array.
Parameters
- element: PixiElement
  The element to remove
Returns void
Inherited from PixiElement.removeElement
- Defined in Element.ts:216

removeListener

removeListener(event: string, fn?: EventListener): this
Parameters
- event: string
- Optionalfn: EventListener
Returns this
Inherited from PixiElement.removeListener
- Defined in global.d.ts:106

repositionChildren

repositionChildren(): void
Returns void
Inherited from PixiElement.repositionChildren
- Defined in Element.ts:583

setChildIndex

setChildIndex(child: DisplayObject, index: number): void
Parameters
- child: DisplayObject
- index: number
Returns void
Inherited from PixiElement.setChildIndex
- Defined in global.d.ts:129

sortChildren

sortChildren(): void
Returns void
Inherited from PixiElement.sortChildren
- Defined in global.d.ts:132

swapChildren

swapChildren(a: DisplayObject, b: DisplayObject): void
Parameters
- a: DisplayObject
- b: DisplayObject
Returns void
Inherited from PixiElement.swapChildren
- Defined in global.d.ts:131

toGlobal

toGlobal(position: { x: number; y: number }, point?: Point): Point
Parameters
- position: { x: number; y: number }
- Optionalpoint: Point
Returns Point
Inherited from PixiElement.toGlobal
- Defined in global.d.ts:111

toLocal

toLocal(
    position: { x: number; y: number },
    from?: DisplayObject,
    point?: Point,
): Point
Parameters
- position: { x: number; y: number }
- Optionalfrom: DisplayObject
- Optionalpoint: Point
Returns Point
Inherited from PixiElement.toLocal
- Defined in global.d.ts:112

updateStyle

updateStyle(styleOptions: ButtonStyleOptions): void
Updates the button's style options and triggers a redraw.
Parameters
- styleOptions: ButtonStyleOptions
  New style configuration to apply
Returns void
- Defined in Components/Button.ts:138

Class Button

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Button

Properties

alpha

angle

buttonMode

children

cursor

Optionaldestroyed

eventMode

height

hitArea

inDrag

interactive

interactiveChildren

isMouseOver

mask

maxSwipeTimeout

minSwipeDistance

parent

pivot

position

renderable

rotation

scale

sortableChildren

visible

width

worldTransform

x

y

StaticrecomputeDragScalePerMove

Accessors

btnState

Parameters

Returns void

currentStyleState

Returns ResolvedStyleState

doubleclickHandler

Parameters

Returns void

dragendHandler

Parameters

Returns void

dragmoveHandler

Parameters

Returns void

dragstartHandler

Parameters

Returns void

pointerdownHandler

Parameters

Returns void

pointermoveHandler

Parameters

Returns void

pointeroutHandler

Parameters

Returns void

pointeroverHandler

Parameters

Returns void

pointertapHandler

Parameters

Returns void

pointerupHandler

Parameters

Returns void

pointerupoutsideHandler

Parameters

`Optional`destroyed

`Static`recomputeDragScalePerMove