# Eventos de Button en UI

Para crear un botón en tu UI, crea un `Button` elemento de UI con las siguientes propiedades:

* `value`: Una cadena con el texto que se mostrará en el botón.
* `onMouseDown`: Una función callback que se ejecuta cada vez que el usuario presiona el botón del puntero sobre la entity.
* `uiTransform`: Propiedades de posicionamiento del elemento de UI.

El siguiente ejemplo muestra cómo crear un botón de UI clickable.

***archivo ui.tsx:***

```tsx
import { Button } from '@dcl/sdk/react-ecs'

export const uiMenu = () => (
	<Button
		value="Haz Click"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('Se hizo Click en la UI')
		}}
	/>
)
```

***archivo index.ts:***

```ts
import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
import { uiMenu } from './ui'

export function main() {
    ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 })
}
```

{% hint style="warning" %}
**📔 Nota**: Todos los siguientes fragmentos en esta página asumen que tienes un `.ts` similar al anterior, ejecutando la función `ReactEcsRenderer.setUiRenderer()` .
{% endhint %}

También puedes escribir la función que se ejecuta por el Click fuera de la definición de UI, y referenciarla por nombre. Esto ayuda a mantener el código de UI más legible, y también es útil si varias entities de UI clickables necesitan llamar a la misma función.

```tsx
import { Button } from '@dcl/sdk/react-ecs'

function handleClick() {
	// Haz algo onClick
	console.log('Se hizo Click en la UI')
}
export const uiMenu = () => (
	<Button
		value="Haz Click"
		uiTransform={{ width: 100 }}
		onMouseDown={{ handleClick }}
	/>
)
```

Los siguientes campos se pueden agregar a un `Button` elemento de UI:

* `onMouseDown`: Una función callback que se ejecuta cada vez que el usuario presiona el botón del puntero sobre la entity.
* `onMouseUp`: Una función callback que se ejecuta cada vez que se suelta el botón del puntero mientras apunta a la entity.
* `onMouseEnter`: Una función callback que se ejecuta cada vez que el puntero comienza a hacer hover sobre el botón.
* `onMouseLeave`: Una función callback que se ejecuta cada vez que el puntero deja de hacer hover sobre el botón.
* `color`: Color de fondo del botón.
* `font`: Fuente del texto en el botón.
* `textAlign`: Alineación del texto dentro del botón
* `uiTransform`: Propiedades de posicionamiento del elemento de UI.
* `uiBackground`: Establece el color o la Texture del elemento de UI.
* `variant`: Usa esta propiedad para establecer el estilo del botón como uno de los predeterminados. `primary` y `secondary` están disponibles.
* `disabled`: Boolean para establecer un botón como deshabilitado. Cuando disabled se establece en *true*, las `onMouseDown` y `onMouseUp` actions ya no se llaman. Además, el valor `alpha` del color tanto del texto como del fondo se reduce a la mitad, por lo que el botón se ve "atenuado" y destaca menos.

## Estilo de Button

Establece la variant en `primary` o `secondary` para aprovechar las opciones de estilo predeterminadas para botones. `primary` hace que tu botón sea rojo con texto blanco, `secondary` hace que tu botón sea blanco con texto rojo.

```tsx
import { UiEntity, Button, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity
		uiTransform={{
			width: 500,
			height: 230,
			margin: '16px 0 8px 270px',
			padding: 4,
			alignSelf: 'center',
		}}
		uiBackground={{ color: Color4.Gray() }}
	>
		<Button
			value="Haz Click"
			variant="primary"
			uiTransform={{ width: 80, height: 20, margin: 4 }}
			onMouseDown={() => {
				console.log('Se hizo Click en la UI')
			}}
		/>
		<Button
			value="Haz Click"
			variant="secondary"
			uiTransform={{ width: 80, height: 20, margin: 4 }}
			onMouseDown={() => {
				console.log('Se hizo Click en la UI')
			}}
		/>
	</UiEntity>
)
```

También tienes libertad de usar todas las propiedades del fondo libremente. También puedes establecer una variant y luego sobrescribir algunas de sus propiedades. Este ejemplo usa la `primary` variant, pero sobrescribe el color para que sea verde:

```tsx
import { Button } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<Button
		value="¡Mi Button!"
		variant="primary"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('¡Se hizo Click en Mi Button!')
		}}
		uiBackground={{
			color: Color4.Green(),
		}}
	/>
)
```

## Botones alternables

Un caso de uso común es hacer que un botón alterne entre dos estados, como un interruptor. El ejemplo a continuación cambia entre dos colores cada vez que se presiona el botón:

```tsx
import { Button } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

let buttonEnabled = false

export const uiMenu = () => (
	<Button
		value="Mi Button"
		variant="primary"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('¡Se hizo Click en Mi Button!')
			buttonEnabled = !buttonEnabled
			if (buttonEnabled) {
				// haz algo
			} else {
				// haz otra cosa
			}
		}}
		uiBackground={{
			color: buttonEnabled ? Color4.Green() : Color4.Red(),
		}}
	/>
)
```

Ten en cuenta que en el ejemplo anterior, el color depende de una variable `buttonEnabled` . Cada vez que cambia el valor de esta variable, afecta inmediatamente el color de fondo.

## Feedback al hacer hover

Otro caso de uso común es mostrar algún tipo de pista visual al hacer hover sobre un botón, para dejar claro que es interactible, o incluso mostrar una pista de hover que explique qué hace este botón. Usa los `onMouseEnter` y `onMouseLeave` callbacks para detectar cuándo el cursor del jugador está sobre el botón, y reaccionar en consecuencia.

```tsx
import { Button } from '@dcl/sdk/react-ecs'

let buttonEnabled = false

export const uiMenu = () => (
	<Button
		value="Mi Button"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			// función del botón
		}}
		onMouseEnter={() => {
			// mostrar pista
		}}
		onMouseLeave={() => {
			// ocultar pista
		}}
	/>
)
```

## Hacer que otros elementos sean clickables

Cualquier elemento de la UI puede hacerse clickable agregándole una propiedad `onMouseDown` , funciona de forma idéntica a un botón. El siguiente ejemplo agrega `onMouseDown` propiedades a imágenes de fondo y texto.

```tsx
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity
		onMouseDown={() => {
			console.log('¡Se hizo Click en el fondo!')
		}}
		uiTransform={{
			width: 400,
			height: 230,
		}}
		uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
	>
		<Label
			onMouseDown={() => {
				console.log('¡Se hizo Click en el Label!')
			}}
			value={`Player: ${getPlayerPosition()}`}
			fontSize={18}
			uiTransform={{ width: '100%', height: 30 }}
		/>
	</UiEntity>
)
```

## Bloqueo del puntero

Todas las entities de UI no bloquean el puntero de forma predeterminada, lo que significa que los Clicks de los jugadores las atravesarán e interactuarán con objetos en el espacio del mundo 3D detrás de ellas. Si una entity tiene un callback `onMouseDown` , entonces pasa a bloquear el puntero, por lo que los Clicks del jugador no afectan lo que está detrás de esa entity de UI.

Puedes cambiar este comportamiento predeterminado cambiando el valor de la propiedad `pointerFilter` en el componente `uiTransform` de cualquier entity de UI. Por ejemplo, para hacer que una entity que no tiene `onMouseDown` bloquee el puntero.

Los valores compatibles para `pointerFilter` son:

* `block`: El elemento de UI bloquea el puntero, los jugadores no pueden hacer Click en nada detrás de este elemento de UI.
* `none`: El elemento de UI no bloquea el puntero. El elemento no es clickable y se puede hacer Click en cualquier cosa detrás de él.

A continuación se muestra una UI simple que no tiene un `onMouseDown`, pero que sobrescribe el comportamiento predeterminado de no bloquear el puntero estableciendo `pointerFilter` en `block`.

```tsx
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

// dibujar UI
export const uiMenu = () => (
	<UiEntity
		uiTransform={{
			width: '100%',
			height: '100px',
			pointerFilter: `block`,
		}}
		uiText={{ value: `Este elemento bloquea el puntero`, fontSize: 40 }}
		uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
	/>
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/ui-2d/ui_button_events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.