SwiftUI Link tutorial – how to create and use Link in SwiftUI

A Link is a control in SwiftUI which enables you to navigate to a URL by opening Safari and loading desired website. It looks just like a standard button. In order to properly use a Link, you need to define it with a text label and a destination URL. Links can be styled by changing the font and color of the text label. This tutorial will show you how to achieve all of that.

In its simplest form, a Link can be created like this:

Link("SwiftUI Tutorials", destination: URL(string: "https://www.simpleswiftguide.com")!)

The result should look like this:

SwiftUI Link
SwiftUI Link

Customize Link

A SwiftUI Link using text as a label can be customized with a custom font and color. Here is an example customizing both with large title font and red color for the text:

Link("SwiftUI Tutorials", destination: URL(string: "https://www.simpleswiftguide.com")!)
    .font(.largeTitle)
    .foregroundColor(.red)

The result looks like this:

Customized SwiftUI Link
Customized SwiftUI Link

You can also set a desired size of the font like this:

Link("SwiftUI Tutorials", destination: URL(string: "https://www.simpleswiftguide.com")!)
    .font(.system(size: 44.0))

Create SwiftUI Link using custom view

A link can also be created using a custom view closure for more flexibility and control over its appearance. 

For example, a link can be created using just an SF Symbol:

Link(destination: URL(string: "https://www.simpleswiftguide.com")!) {
    Image(systemName: "paperplane")
        .font(.largeTitle)
}

A Link can also be made of a VStack with an image and text stacked up:

Link(destination: URL(string: "https://www.simpleswiftguide.com")!) {
    VStack {
        Image(systemName: "paperplane")
            .font(.largeTitle)
        Text("Let's go!")
    }
}

The result should look like this:

Custom SwiftUI Link with Image and Text in VStack
Custom SwiftUI Link with Image and Text in VStack

Take a look at Apple’s official SwiftUI Link documentation. 

Related tutorials: