# Button Theme

The Button Theme section lets you design how buttons appear across your app. From font size to corner radius, you can fine-tune everything to match your brand. 

You can configure both **Primary** and **Secondary** buttons individually.

Button theme will be applied to Native Screen button only.

### Shape

Choose the button shape from preset options — square, slightly rounded, fully rounded, or fully custom. You can also manually set the corner radius to define how round the corners should be.

### Background

Pick a Background Color for the button, and adjust its transparency using the opacity setting. This helps you create buttons that pop or blend subtly with the background, depending on your design needs.

### **Button Height**

Controls the vertical size of the button in pixels.

* A higher value creates taller, more prominent buttons
* A lower value creates compact, minimal buttons
* Default height is typically **50 px**

Use this to match your app’s visual style or to improve tap accessibility.

### Text Settings

You can control how the button text looks by adjusting:

* **Text Color:** Set the color of the button label.
* **Text Size:** Define the size of the button text (in pixels).
* **Font Weight:** Choose the thickness of the text, such as Regular (400), Medium (500), or Bold (700).

### Border

If you want your buttons to have a border, you can set the border width in pixels and select a border color. If you prefer flat buttons without borders, just keep the width at 0.

<figure><img src="/files/FFjTrGBjpQWEGitLSMQt" alt=""><figcaption></figcaption></figure>

#### Best Practices

* Keep your Primary buttons bold and easy to spot — these are for your main actions (like “Buy Now” or “Submit”).
* Use Secondary buttons for less important or alternative actions.
* Ensure your text color has good contrast with the background for readability and accessibility.
* Preview your button designs inside the app before going live to see how they feel in real use.


---

# 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/setup-theme/app-theme/button-theme.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.