Last updated: March 2026 Category: Designing Your App
Overview
The Button component adds a tappable call-to-action to your app's home screen. Buttons can link to any screen in your app, a specific product or collection, or an external URL using deep links. They are fully customizable in terms of color, size, shape, and text.
How to Use
Adding a Button
Drag the Button component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Button component in the Phone Preview with the Inspector Panel open]
Configuring Button Content
In the Content tab, set up the button's core properties:
Button text — Enter the label displayed on the button (e.g., "Shop Now," "View Collection," "Learn More").
Deep link — Enter the link destination. This can be:
An internal app screen (e.g., a collection, product, or page)
An external URL that opens in the in-app browser
[Screenshot: Content tab showing button text and deep link fields]
Customizing Appearance
In the Layout and Settings tabs, adjust the button's visual style:
Background color — Set the button's fill color. Use a color that stands out against your home screen background.
Text color — Set the label's text color. Ensure strong contrast with the background color for readability.
Border radius — Control how rounded the button corners are. A value of 0 gives sharp corners, while higher values create a pill-shaped button.
Border color — Optionally add a visible border around the button.
Border width — Set the thickness of the border in pixels.
Size and Width
Size — Choose from small, medium, or large preset sizes that control the button's padding and font size.
Full-width — Toggle on to make the button stretch across the entire screen width. Toggle off for an inline button that fits its content.
Alignment — When full-width is off, align the button to the left, center, or right.
[Screenshot: Button with full-width enabled compared to a centered inline button]
Settings
Padding — Fine-tune the inner spacing around the button text.
Margin — Adjust the outer spacing to separate the button from surrounding components.
Font size — Override the default font size if the preset size options don't meet your needs.
Font weight — Choose bold or regular text weight.
Tips
Place buttons after product sections or promotional banners to guide customers toward a specific action.
Use action-oriented text: "Shop Now," "Explore the Collection," or "Get 20% Off" perform better than generic labels like "Click Here."
Limit your home screen to 2–3 buttons. Too many calls to action can overwhelm customers and reduce the impact of each one.
Use a contrasting background color to make the button visually distinct. If your app theme is light, try a bold or dark button color.
A border radius of 8–12 pixels gives a modern, slightly rounded look. Use 50+ pixels for a fully rounded pill shape.
Test the deep link by tapping the button in the app preview to confirm it navigates to the correct destination.
Related Articles