Skip to content

SwiftUI: Button

Last updated on March 9, 2023

Button allows you to perform an action when triggered.

The method of “triggering” the button may vary. For example, on iOS a button is triggered by tapping it onscreen, whereas on tvOS it’s triggered by pressing “select” on an external remote while the button is focused.

Apple Documentation

In this tutorial, you’ll learn what it takes to build a button with SwiftUI.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11 with at least iOS 9.1.

Normal Button

The basic way of building a button is as following.

  • Text is where you set your own text
Button(action: { }, label: {
  Text("This is a button")
})

Button Customization

The following button uses:

Button(action: { }, label: {
  Text("This is a button")
    .padding()
    .foregroundColor(.white)
    .background(Color.blue)
    .cornerRadius(8)
})
  • Padding which creates the rectangle of the button.
  • ForegroundColor which sets the color of the text.
  • background which sets the background color.
  • cornerRadius which sets rounded curve on each corner.

Shadow

Button(action: { }, label: {
...
})
  .shadow(color: Color.blue, radius: 20, y: 5)
  • shadow adds color of the shadow, radius and the position of x and y.

Infinity Corner Radius

infinity will always give you the perfect corner.

.cornerRadius(.infinity)

Border

.border allows you to create a line around the button. You will still need padding to have a good looking rectangle shape.

.padding()
.border(Color.blue)

Another way of achieving border with the rounded corner is as following:

.padding()
.background(RoundedRectangle(cornerRadius: 10).stroke(Color.blue, lineWidth: 2))
  • RoundedRectangle which create a corner radius for a rectangle.
  • stroke allows you to adjust the width and color of the border.

Button With Image

Perhaps, showing only text could be a little dull. Why not add some image on it?

Button(action: {}) {
  HStack{
    Text("This is a button")
    .padding(.horizontal)
    Image(systemName: "person.crop.circle.fill") 
  }
  .padding()
}
.foregroundColor(Color.white)
.background(Color.blue)
.cornerRadius(8)
  • padding(.horizontal) widens the width of the button. You may disable this if you don’t need it.
  • Image(systemName) allows you to utilize the built in images given by Apple. You may download SF Symbols to better utilize this tool.

In case you would like this image to be of the left. This can be done really easier with a switch of code by moving the image code up one line.

Image(systemName: "person.crop.circle.fill")
Text("This is a button")

What about just image?

Button(action: {}) {
  Image("tesla")
    .renderingMode(.original)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 200, height: 50)
    .cornerRadius(40)
}
  • renderingMode allows the image to be shown. If you take this line out, you won’t be able to see the image.
  • resizeable allows you to resize the button.
  • aspectRatio allow you to control the content of the image.
  • frame lets you set the width and height.

Where to go From Here

Check out some other tutorials using SwiftUI as well:

Published inSwiftUI

Comments are closed.