# Button Element

The Button element lets you create call-to-action (CTA) buttons like “Buy Now”, “View More”, or “Open Link”. You can link these buttons to any page, product, or even an external website.

It’s a key interactive element that drives user actions.

***

{% tabs %}
{% tab title="Content Tab" %}

### ✏️ Set Button Details

You can choose between:

* 1 Button – Simple, single action (default)
* 2 Button – Two side-by-side buttons for dual actions (e.g., “Yes” / “No”)

#### For each button:

* Button Title – The visible text on the button (e.g., “Shop Now”)
* Action URL – Where the user goes when they tap the button (e.g., your website, screen link, or a custom URL)

📝 *Make sure your links are valid and start with https\:// or twinr:// for app-specific links.*
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Settings Tab</mark>

### 🎨 Customize Look and Layout

### Layout

* Button Size: Small, Medium, or Large
* Button Width:
  * Fill: stretches across the screen
  * Fit to text: wraps button tightly around the text
* Alignment:
  * Left, Center, or Right align the button within the screen

### Design

Choose from preset styles for button appearance:

* Filled, Outlined, or Link-style buttons

### Margin

Add spacing around the button using sliders for:

* Top and Bottom margins (default: 20px)

***

### 👁️ Visibility Settings

You can control where and to whom the button appears:

* Platform: Android, iOS, or All
* Device: Mobile, Tablet, or All
* User: Guest users, Logged-in users, or All
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">✅ Summary</mark>

| Tab        | What You Can Do                                    |
| ---------- | -------------------------------------------------- |
| Content    | Add button title(s) and destination links          |
| Settings   | Style buttons, adjust layout and alignment         |
| Visibility | Choose device, platform, and user-specific display |
| Preview    | Instantly see how it looks inside your app screen  |


---

# 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://help.twinr.dev/native-screen/button-element.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.