Skip to main content

​
Overview

Buttons are one of the most common UI elements in products, used to initiate actions with a tap. 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.

​
Properties

In addition to the properties below, images also have access to general object properties in the Expression Editor.
  • Button
  • SwiftUI Button

​
Tint

Select the button’s primary color. Color overrides are available in the Customize popup.
Button.tintColor
Type: color
Can get or set the tint color or an individual color property.

​
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:
  • 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.
  • Glass: The text is the tint color and the background uses the system’s default glass material.
  • Clear Glass: The text is the tint color and the background uses a clearer, higher-transparency glass material.
  • Prominent Glass: The text is the white or high-contrast and the background uses a stronger, more opaque glass material.
  • Prominent Clear Glass: The text is white or the tint color and the background uses a high-clarity but brighter glass material. Style Pn

​
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.Button Content

​
Title

Enter the button’s title (label). Optional
Button.title
Type: string
Can get or set the value.

​
SF Symbol

Select the button’s SF Symbol, and customize its size & weight. Optional
Button.symbolName
Type: string
Can get or set the value.
Button.symbolScale
Type: string
Value: small, medium, large
Can get or set the value.
Button.symbolSize
Type: number
Can get or set the value.
Button.symbolWeight
Type: style
Values: ultralight, thin, light, regular, medium, semibold, bold, heavy, black
Can get or set the value.

​
Subtitle

Enter the button’s subtitle. Optional
Button.subtitle
Type: string
Can get or set the value.

​
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.
Button.titleColor
Type: color
Can get or set the tint color or an individual color property.
Button.subtitleColor
Type: color
Can get or set the tint color or an individual color property.

​
Symbol Properties

Set the icon’s properties. Learn more about SF Symbol properties.
Button.iconTintColor
Type: color
Can get or set the tint color or an individual color property.
Button.iconSecondaryColor
Type: color
Can get or set the tint color or an individual color property.
Button.iconTertiaryColor
Type: color
Can get or set the tint color or an individual color property.

​
Control Padding

Set the button’s padding.

​
BG

Set the button’s background color.

​
Resources

Links

Apple Human Interface Guidelines for Buttons

Apple Developer Documentation for Buttons

⌘I