> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/native-screen/button-element.md).

# 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  |