Buttons
Button
is a view in SwiftUI that triggers an action when tapped. It is one of the essential components for creating interactive apps, allowing users to perform actions.
Creating Buttons
Buttons are created by specifying an action (code to execute when the button is tapped) and a label (the content of the button that is displayed to users). For example, here’s a basic button that prints a message when tapped.:
Button(action: {print("Button tapped!")}) {Text("Tap Me")}
Note: Buttons in SwiftUI can use any SwiftUI view as a label, not just
Text
. This allows for highly customizable and complex button content, such as combining icons, shapes, or even animations.
Basic Button
A simple button in SwiftUI is created using the Button
view. You can pass a closure (action) to the button that will be executed when the button is tapped:
Button("Tap Me") {print("Button tapped!")}
Button Actions
You can define any action inside the button’s closure. For instance, navigating to a new view, changing a state, or interacting with a model can be done in the action block:
Button("Navigate") {// Navigate to a new view// Navigation logic goes here}
Button Modifiers
SwiftUI offers various modifiers to style and configure buttons:
.font()
to change the font of the button label..foregroundColor()
to set the text color..background()
to set the button’s background color..cornerRadius()
to round the button’s corners.
Button("Styled Button") {print("Styled button tapped!")}.font(.headline).foregroundColor(.white).padding().background(Color.blue).cornerRadius(10)
Note: By chaining multiple modifiers, buttons can be customized with greater flexibility, allowing you to change font styles, colors, backgrounds, and more.
Disabled Buttons
Disabled buttons are useful when an action is unavailable based on user interaction or certain conditions. For instance, a ‘submit’ button could be disabled until required fields are filled.
Disabled buttons are non-interactive and appear grayed out to indicate their inactive state. Buttons can be disabled by using the .disabled()
modifier as follows:
Button("Disabled Button") {// Action here}.disabled(true)
Buttons with Custom Content
You can also create buttons with custom content, such as text, images, or other SwiftUI views. The content inside the button can be customized as needed:
Button(action: {print("Custom button tapped!")}) {HStack {Image(systemName: "star.fill").foregroundColor(.yellow)Text("Star Button").font(.title)}}
The output will look like this:
In this example:
The button displays an image and text.
The HStack
is used to arrange the image and text side by side (horizontally).
Customizing Buttons
Buttons can be styled and customized using SwiftUI modifiers to change their appearance such as fonts, colors, backgrounds, and more. Below is an example where various modifiers change the button’s appearance:
Button(action: {print("Custom button tapped!")}) {Text("Click Me").font(.title).foregroundColor(.white).padding().background(Color.blue).cornerRadius(10)}
The output will look like this:
Button Styles
SwiftUI provides several built-in button styles that can change the appearance of buttons globally:
DefaultButtonStyle
: The standard button appearance, which adapts its look based on the platform and context.PlainButtonStyle
: Removes visual styling, leaving only the label content.BorderedButtonStyle
: Adds a border to the button (available in iOS 15+).BorderlessButtonStyle
: Removes borders, often used in toolbars or lists (available in iOS 15+).
You can apply these styles using the .buttonStyle()
modifier:
Button("Styled Button") {print("Styled button tapped!")}.buttonStyle(BorderedButtonStyle())
Example
Here’s an example of a VStack
containing buttons with different styles and labels:
import SwiftUIstruct ButtonExampleView: View {var body: some View {VStack(spacing: 20) {Button("Simple Button") {print("Simple button tapped!")}Button(action: {print("Custom button tapped!")}) {Text("Custom Button").font(.headline).foregroundColor(.white).padding().background(Color.green).cornerRadius(8)}Button(action: {print("Image button tapped!")}) {HStack {Image(systemName: "star.fill").foregroundColor(.yellow)Text("Image Button").font(.body)}}}.padding()}}
The output will look like this:
Explanation:
- The first button is a simple text button.
- The second button uses custom styling with a green background and rounded corners.
- The third button combines an image and text within an
HStack
.
All contributors
- Anonymous contributor
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn SwiftUI on Codecademy
- Skill path
Build iOS Apps with SwiftUI
Learn how to build iOS applications with Swift and SwiftUI and publish them to Apples' App Store.Includes 7 CoursesWith CertificateBeginner Friendly13 hours - Free course
Learn Swift
A powerful programming language developed by Apple for iOS, macOS, and more.Beginner Friendly12 hours