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