# Button

> क्लिक करने योग्य बटन जो टेक्स्ट और/या आइकन दिखाता है, दबाए जाने की अवस्था और onAction के साथ।

Source: https://crossfly.dev/hi/docs/ui/widgets/button — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Button

`Button` सबसे बुनियादी इंटरैक्टिव घटक है: यह टेक्स्ट और/या आइकन दिखाता है और टैप किए जाने पर एक क्रिया ट्रिगर करता है, दबाए जाने की दृश्य अवस्था के साथ (`ButtonStyle` के माध्यम से)। जब टेक्स्ट **और** आइकन दोनों हों, तो उनके बीच सापेक्ष स्थिति [`TextPos`](/docs/reference) enum द्वारा नियंत्रित होती है। यह अन्य विजेट्स का आधार भी है (उदाहरण के लिए, `Dropdown extends Button`)।

क्रिया `onAction(Action)` से पंजीकृत की जाती है (`Component` से विरासत में मिली); ट्रिगर मानक क्लिक प्रवाह में होता है (`onTouchUp` में `runActions()`), `onTouchDown` में नहीं।

> 🟢 · **पैकेज:** `dev.crossfly.ui` · **विस्तार करता है:** `Component` · **शैली:** `ButtonStyle`

## कब उपयोग करें
- कोई भी टैप करने योग्य क्रिया: सहेजना, पुष्टि करना, नेविगेट करना, डायलॉग खोलना।
- केवल-आइकन बटन (टूलबार) या केवल-टेक्स्ट बटन (लिंक/द्वितीयक क्रिया)।

## कब उपयोग न करें
- स्थैतिक लेबल → [`Label`](/docs/ui/widgets/label) का उपयोग करें।
- स्थायी चालू/बंद टॉगल → `Switch`/`Option` का उपयोग करें (देखें [`ui/`](/docs/ui))।

## दिखावट
टेक्स्ट और/या आइकन बटन के अंदर केंद्रित। दोनों उपस्थित होने पर, `[आइकन + gap + टेक्स्ट]` ब्लॉक दोनों अक्षों पर केंद्रित होता है; `icongap` अंतराल परिभाषित करता है। स्थिति `TextPos` का अनुसरण करती है:

| `TextPos` | लेआउट | `isHorizontal()` |
|---|---|---|
| `NONE` | टेक्स्ट और आइकन आरोपित (केंद्रित) | false |
| `TEXT_AT_LEFT` | आइकन के बाईं ओर टेक्स्ट | true |
| `TEXT_AT_RIGHT` | आइकन के दाईं ओर टेक्स्ट | true |
| `TEXT_AT_TOP` | आइकन के ऊपर टेक्स्ट | false |
| `TEXT_AT_BOTTOM` | आइकन के नीचे टेक्स्ट | false |

यदि `textPos == null`, तो डिफ़ॉल्ट केंद्रित आरोपण है (`NONE` के समतुल्य)।

``

## संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // Label जो दिखाता है कि बटन को कितनी बार छुआ गया
      Label saida = new Label("Cliques: 0");
      add(LAY_AUTO, saida);

      // callback के अंदर उपयोग किया गया परिवर्तनीय काउंटर (1 स्थिति का array)
      final int[] cliques = {0};

      // बटन जो काउंटर बढ़ाता है और हर टच पर Label अपडेट करता है
      Button botao = new Button("Clique aqui")
         .onAction(c -> saida.setText("Cliques: " + (++cliques[0])));
      add(LAY_AUTO, botao);
   }
}
```

> नीचे दिए गए स्निपेट **केवल मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर दिए `MainWindow` कंकाल में रखें।

## बुनियादी उपयोग
```java
Button b = new Button("Salvar").onAction(c -> salvar());
container.add(LAY_AUTO, b);
```

## कंस्ट्रक्टर
| कंस्ट्रक्टर | विवरण |
|---|---|
| `Button(String text)` | केवल टेक्स्ट वाला बटन |
| `Button(Icon icon)` | केवल आइकन वाला बटन |
| `Button(String text, Icon icon, TextPos textPos)` | सापेक्ष स्थिति के साथ टेक्स्ट + आइकन |

## गुण और अनुकूलन
| गुण / मेथड | प्रकार | डिफ़ॉल्ट | क्या करता है |
|---|---|---|---|
| `setText(String)` | `void` | — | टेक्स्ट बदलता है, लेआउट को अमान्य करता है और `repaint()` कॉल करता है |
| `icon(Icon, TextPos)` | `Button` (fluente) | — | आइकन और टेक्स्ट के सापेक्ष उसकी स्थिति परिभाषित करता है |
| `text` / `icon` / `textPos` | सार्वजनिक फ़ील्ड | — | वर्तमान सामग्री (पढ़ी/असाइन की जा सकती है) |
| शैली `.pressable()` | — | — | दबाए जाने का हाइलाइट सक्षम करता है |
| शैली `.textAlign(Position, Position)` | `Position` | थीम | सामग्री का संरेखण |
| शैली `.autoWidth(Relative)` / `.autoHeight(Relative)` | `Relative` | — | पसंदीदा आकार तय करता है |
| `getAutoWidth()` / `getAutoHeight(int)` | `int` | — | सामग्री के अनुसार पसंदीदा आकार |

## कॉलबैक और इवेंट
| कॉलबैक | कब ट्रिगर होता है |
|---|---|
| `onAction(Action)` | क्लिक पूरा होने पर (touch-up), `runActions()` के माध्यम से। `this` लौटाता है, जिससे चेनिंग संभव होती है (`new Button(...).onAction(...).style(...)`)। |

`Action` `c -> { ... }` है, जहाँ `c` मूल `Component` है; यह `Exception` फेंक सकता है।

## अवस्थाएँ
- **pressed:** दबाए जाने के दौरान, `ButtonStyle` दबाव शैली लागू करता है (fade के साथ)। शैली में `pressable()` आवश्यक है।
- **disabled:** `setEnabled(false)` अक्षम दिखावट लागू करता है और टैप को अनदेखा करता है।

### टेक्स्ट के दाईं ओर आइकन वाला बटन
```java
Button proximo = new Button(
   "Próximo", new MaterialIcon(""), TextPos.TEXT_AT_RIGHT);
container.add(LAY_AUTO, proximo);
```

### "लिंक" शैली का बटन जो फ़ील्ड साफ़ करता है
```java
Button clear = new Button("Clear").style(
   Styles.theme().button(ButtonRole.LINK, State.NORMAL)
      .pressable()
      .textAlign(Position.CENTER, Position.CENTER));
clear.onAction(c -> {
   nome.clearText();
   email.clearText();
});
container.add(LAY_AUTO, clear);
```

## अच्छे तरीके
- जब बटन में टेक्स्ट **और** आइकन दोनों हों तो हमेशा `textPos` पास करें (अन्यथा वे आरोपित हो जाते हैं)।
- दृश्य संगति के लिए थीम भूमिकाओं (`ButtonRole.PRIMARY`/`SECONDARY`/`LINK`) का उपयोग करें।
- बटनों में अंतर देने के लिए, `Gap` या `ingap`/`outgap`/लेआउट के अंश का उपयोग करें — `Spacer` हटा दिया गया था (देखें [`spacing.md`](/docs/ui/widgets/spacing))।

## सामान्य गलतियाँ
- **`textPos` के बिना `text` + `icon`:** परिणाम आरोपित हो जाता है (`null` = `NONE` का व्यवहार)।
- **`onTouchDown` में ट्रिगर की अपेक्षा करना:** क्रिया मानक क्लिक प्रवाह (touch-up) में ट्रिगर होती है।

## यह भी देखें
- क्षेत्र गाइड: [`ui/`](/docs/ui) · रेसिपी: [`cookbook/`](/docs/cookbook)
- अवधारणा (घटक मॉडल / `onAction`): [`concepts/`](/docs/concepts)
- संबंधित घटक: [`Label`](/docs/ui/widgets/label) · [`ImageView`](/docs/ui/widgets/imageview)