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.

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.


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.

Last updated

Was this helpful?