Buttons

Anonymous contributor's avatar
Anonymous contributor
Published Jan 26, 2025
Contribute to Docs

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:

Buttons with Custom Content

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:

Custom Button in Swift

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 SwiftUI
struct 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:

VStack containing custom button

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

Contribute to Docs

Learn SwiftUI on Codecademy