Buttons are one of the most common UI elements in products, used to initiate actions with a tap. Play’s button element simplifies your design process by letting you customize Apple’s native button.
You can design a button-like component using a stack and text, but native buttons provide a couple of unique benefits. First, your button will be one element with the text, icon, and spacing prebuilt and fully customizable. This keeps your project clean! Second, you’ll have access to the SwiftUI properties for Apple’s UIButton which makes it easy for engineers to plug in values as they code.
Button Presets
Play has four button presets: Large, Medium, Medium + Icon, and Icon. These all use the same element, but they’re customized into common UI patterns for different starting points. You can adjust the properties for all of them.
Button Size
There are three button sizes: Small, Medium, and Large. Each size automatically adjusts its height and width based on the content inside, but each option has a different amount of padding surrounding the contents.
You can also create a custom-sized button using the Width and Height properties in the Layout Panel.
Style
The Button Style property has four options that vary the appearance of your button:
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.
Button styles can be used for many different situations and will automatically adapt to your tint color.
Content
A button is a single layer in Play, but it can include text and icons using the button’s properties. There are three elements you can include in your button: a Title, an Image (currently an icon), and/or a Subtitle
You can choose to have all three elements, only two, or just one. If you have multiple selected, you can adjust the alignment to further customize your button.
Tap or click on the elements in the Content property to include them. Once an element is selected, you can tap/click again to disable it. If an element is selected, content options will appear below.
Title
If you include a title, you will see properties to enter text and select a title font from your Type styles.
Image
If you include an image, you will see a property to select an icon from our full list of SF Symbols. You can adjust the icon’s size & weight in the SF Symbol panel.
Subtitle
If you include a subtitle, you will see properties to enter text and select a subtitle font from your Type styles.
Tint
Native buttons have a primary color, chosen using the Tint property. The tint color will be the background color and/or the text color, depending on which style you choose.
You can override the tint color and adjust the title color, subtitle color, image color, and fill (background) color individually.