Skip to main content
Button

A native element that initiates an action when tapped.

Updated over a week ago

Overview

Buttons are one of the most common UI elements in products, used to initiate actions with a tap. Play’s button element uses Apple’s native button.

Play has four button presets: Large, Medium, Medium + Icon, and Icon. These all use the button element, but they’re customized into common UI patterns for different starting points. You can adjust the properties for all of them.

To use a native button or design a custom button?

You can create a "button" using a stack with text and/or an SF Symbol, but native buttons provide a couple of unique benefits:


1. Native buttons are a single layer. The text, icon, and spacing are prebuilt and fully customizable. Native buttons keep your project clean!

2. Native buttons use Apple’s UIButton's SwiftUI properties. It's easy for engineers to plug in values as they code.


Element Properties

Tint

Select the button's primary color. Color overrides are available in the Customize popup.

Size

Set the button's size to small, medium, or large. The size can be overridden by the Layout Panel's Width & Height properties.

Style

Set the button's style to filled, plain, gray, tinted:

  • Filled: The text is white and the background is the tint color.

  • Plain: The text is the tint color and there is no background color.

  • Gray: The text is the tint color and the background is a low-opacity gray.

  • Tinted: The text is the tint color and the background is the tint color at a low opacity.

Corner Style

Set the button's corner radius:

  • Dynamic: The corner radius changes based on the button's size.

  • Small: The corner radius is 4pt.

  • Medium: The corner radius is 6pt.

  • Large: The corner radius is 8pt.

  • Capsule: The corners are completely curved.

  • Custom: The corner radius can be set to any point value with the Button Corners property. Click the right side of the Button Corner property to set individual corners.

Content

Set the content within the native button. A native button is a single layer, but it includes a combination of title text, subtitle text, and icon.

Title

Enter the button's title (label). Optional

SF Symbol

Select the button's SF Symbol, and customize its size & weight. Optional

Subtitle

Enter the button's subtitle. Optional

Alignment

Set the vertical and horizontal alignment of the button's contents.

Customize

Text Properties

Set the Title and Subtitle's text properties. Learn more about text properties.

Symbol Properties

Set the icon's properties. Learn more about SF Symbol properties.

Control Padding

Set the segmented control's top and bottom padding.

BG

Set the button's background color.


Expression Editor Properties

No button specific Expression Editor properties. See all object properties.


Resources

Links

Did this answer your question?