# ButtonComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<ButtonComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/components/button-component.ts#L30

The ButtonComponentElement interface provides properties and methods for manipulating
[`<pc-button>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-button/) elements.
The ButtonComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

Engine component: [ButtonComponent](https://api.playcanvas.com/engine/classes/ButtonComponent.html) (`button`).

**elementSummary** The `<pc-button>` element makes its entity respond to pointer input, tinting or
swapping its image as the pointer hovers, presses and releases it. The entity also needs a
`<pc-element>` with `use-input` set. Must be a child of a `<pc-entity>`, `<pc-model>` or
`<pc-node>`.

## Accessors

### active

```ts
get active(): boolean
set active(value: boolean)
```

Gets whether the button is active.

### component

```ts
get component(): ButtonComponent | null
```

Gets the underlying PlayCanvas button component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### fadeDuration

```ts
get fadeDuration(): number
set fadeDuration(value: number)
```

Gets the duration over which tint transitions are applied.

### hitPadding

```ts
get hitPadding(): Vec4
set hitPadding(value: Vec4)
```

Gets the padding used to expand the button's hit area.

### hoverSpriteAsset

```ts
get hoverSpriteAsset(): string
set hoverSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is hovered.

### hoverSpriteFrame

```ts
get hoverSpriteFrame(): number
set hoverSpriteFrame(value: number)
```

Gets the frame of the hover sprite to show.

### hoverTint

```ts
get hoverTint(): Color
set hoverTint(value: Color)
```

Gets the hover tint color.

### image

```ts
get image(): string
set image(value: string)
```

Gets the reference (a `pc-entity`, `pc-model` or `pc-node` name, or a document-wide `#`
selector) to the entity whose image element is used for visual transitions, or empty for
the button's own entity.

### inactiveSpriteAsset

```ts
get inactiveSpriteAsset(): string
set inactiveSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is inactive.

### inactiveSpriteFrame

```ts
get inactiveSpriteFrame(): number
set inactiveSpriteFrame(value: number)
```

Gets the frame of the inactive sprite to show.

### inactiveTint

```ts
get inactiveTint(): Color
set inactiveTint(value: Color)
```

Gets the inactive tint color.

### pressedSpriteAsset

```ts
get pressedSpriteAsset(): string
set pressedSpriteAsset(value: string)
```

Gets the id of the `pc-asset` sprite shown when the button is pressed.

### pressedSpriteFrame

```ts
get pressedSpriteFrame(): number
set pressedSpriteFrame(value: number)
```

Gets the frame of the pressed sprite to show.

### pressedTint

```ts
get pressedTint(): Color
set pressedTint(value: Color)
```

Gets the pressed tint color.

### transitionMode

```ts
get transitionMode(): "sprite" | "tint"
set transitionMode(value: "sprite" | "tint")
```

Gets how the button reacts to being hovered/pressed.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `Record<string, any>`: The initial component data.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `protected initComponent(): void`
- `ready(): Promise<ButtonComponentElement>`