# Eventos de botão da UI

Para criar um button na sua UI, crie um `Button` UI element com as seguintes propriedades:

* `value`: Uma string com o texto a ser exibido no button.
* `onMouseDown`: Uma função de callback que é executada toda vez que o usuário pressiona o botão do pointer na entity.
* `uiTransform`: Propriedades de posicionamento do UI element.

O exemplo a seguir mostra como criar um UI button clicável.

***arquivo ui.tsx:***

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

export const uiMenu = () => (
	<Button
		value="Click me"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('Clicked on the UI')
		}}
	/>
)
```

***arquivo 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 os snippets a seguir nesta página assumem que você tem um `.ts` semelhante ao acima, executando a função `ReactEcsRenderer.setUiRenderer()` .
{% endhint %}

Você também pode escrever a função executada pelo clique fora da definição da UI e referenciá-la pelo nome. Isso ajuda a tornar o código da UI mais legível e também é útil se várias UI entities clicáveis precisarem chamar a mesma função.

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

function handleClick() {
	// Fazer algo onClick
	console.log('Clicked on the UI')
}
export const uiMenu = () => (
	<Button
		value="Click me"
		uiTransform={{ width: 100 }}
		onMouseDown={{ handleClick }}
	/>
)
```

Os seguintes campos podem ser adicionados a um `Button` UI element:

* `onMouseDown`: Uma função de callback que é executada toda vez que o usuário pressiona o botão do pointer na entity.
* `onMouseUp`: Uma função de callback que é executada toda vez que o botão do pointer é liberado enquanto aponta para a entity.
* `onMouseEnter`: Uma função de callback que é executada toda vez que o pointer começa a passar o mouse sobre o button.
* `onMouseLeave`: Uma função de callback que é executada toda vez que o pointer para de passar o mouse sobre o button.
* `color`: Cor de fundo do button.
* `font`: Fonte do texto no button.
* `textAlign`: Alinhamento do texto dentro do button
* `uiTransform`: Propriedades de posicionamento do UI element.
* `uiBackground`: Defina a cor ou a texture do UI element.
* `variant`: Use esta propriedade para definir o estilo do button como um dos padrões. `primary` e `secondary` estão disponíveis.
* `disabled`: Boolean para desativar um button. Quando disabled é definido como *true*, os `onMouseDown` e `onMouseUp` actions não são mais chamados. Além disso, o valor de `alpha` da cor tanto do texto quanto do fundo é reduzido pela metade, então o button fica "acinzentado" e se destaca menos.

## Estilização do Button

Defina o variant para `primary` ou `secondary` para aproveitar as opções padrão de estilização de buttons. `primary` torna seu button vermelho com texto branco, `secondary` torna seu button branco com texto vermelho.

```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="Click Me"
			variant="primary"
			uiTransform={{ width: 80, height: 20, margin: 4 }}
			onMouseDown={() => {
				console.log('Clicked on the UI')
			}}
		/>
		<Button
			value="Click Me"
			variant="secondary"
			uiTransform={{ width: 80, height: 20, margin: 4 }}
			onMouseDown={() => {
				console.log('Clicked on the UI')
			}}
		/>
	</UiEntity>
)
```

Você também pode usar livremente todas as propriedades do background. Você também pode definir um variant e depois sobrescrever algumas de suas propriedades. Este exemplo usa o `primary` variant, mas sobrescreve a cor para ser verde:

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

export const uiMenu = () => (
	<Button
		value="My Button!"
		variant="primary"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('Clicked on My Button!')
		}}
		uiBackground={{
			color: Color4.Green(),
		}}
	/>
)
```

## Buttons alternáveis

Um caso de uso comum é fazer um button alternar entre dois estados, como um switch. O exemplo abaixo alterna entre duas cores cada vez que o button é pressionado:

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

let buttonEnabled = false

export const uiMenu = () => (
	<Button
		value="My Button"
		variant="primary"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			console.log('Clicked on My Button!')
			buttonEnabled = !buttonEnabled
			if (buttonEnabled) {
				// fazer algo
			} else {
				// fazer outra coisa
			}
		}}
		uiBackground={{
			color: buttonEnabled ? Color4.Green() : Color4.Red(),
		}}
	/>
)
```

Observe que, no exemplo acima, a cor depende de uma variável `buttonEnabled` . Sempre que o valor dessa variável muda, ela afeta imediatamente a cor de fundo.

## Feedback de Hover

Outro caso de uso comum é exibir algum tipo de dica visual ao passar o mouse sobre um button, para deixar claro que ele é interativo, ou até mesmo exibir uma hover hint explicando o que esse button faz. Use os `onMouseEnter` e `onMouseLeave` callbacks para detectar quando o cursor do player está sobre o button e reagir de acordo.

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

let buttonEnabled = false

export const uiMenu = () => (
	<Button
		value="My Button"
		uiTransform={{ width: 100, height: 100 }}
		onMouseDown={() => {
			// função do button
		}}
		onMouseEnter={() => {
			// mostrar dica
		}}
		onMouseLeave={() => {
			// ocultar dica
		}}
	/>
)
```

## Tornar outros elementos clicáveis

Qualquer elemento na UI pode ser tornado clicável adicionando uma `onMouseDown` property a ele; ela funciona de forma idêntica a um button. O exemplo a seguir adiciona `onMouseDown` properties a imagens de background e texto.

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

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

## Bloqueio de pointer

Todas as UI entities não bloqueiam pointer por padrão, o que significa que os cliques dos players passarão por elas e interagirão com objetos no espaço do mundo 3D atrás delas. Se uma entity tiver um callback, então ela se torna bloqueadora de pointer, então os cliques dos players não afetam o que está atrás dessa UI entity. `onMouseDown` Você pode alterar esse comportamento padrão mudando o valor da propriedade

pointerFilter `no` component em qualquer UI entity. Por exemplo, para definir uma entity que não tem nenhum `uiTransform` para ser bloqueadora de pointer. `onMouseDown` Os valores suportados para

são: `no` block

* `: O UI element é bloqueador de pointer; os players não podem clicar em nada atrás deste UI element.`none
* `: O UI element não bloqueia pointer. O elemento não é clicável e qualquer coisa atrás dele pode ser clicada.`Abaixo está uma UI simples que não tem um

, mas que substitui o comportamento padrão de não bloquear pointer ao definir `onMouseDown`como `no` // desenhar UI `: O UI element é bloqueador de pointer; os players não podem clicar em nada atrás deste UI element.`.

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

width: '100%',
export const uiMenu = () => (
	<UiEntity
		uiTransform={{
			height: '100px',
			pointerFilter: `block`,
			uiText={{ value: `This element is pointer blocking`, 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-pt/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.