Links

Links direct users to other parts of your site, or to external locations.

In the simplest case we can create a link with a string target:

Text {
    Link("Go Home", target: "/")
}

Go Home

Alternatively, you can use page types directly to get their path:

Text {
    Link("Learn about carousels", target: CarouselExamples())
}

Learn about carousels

Using a .target(.blank) modifier opens new tabs:

Text {
    Link("Another tab of links", target: LinkExamples())
        .target(.blank)
}

Another tab of links

Use LinkGroup when you need to make multiple HTML elements clickable as a single link:

LinkGroup(target: "/") {
    Section {
        Text("Building Modern Websites")
            .font(.title3)
        
        Text("Learn how to create beautiful, responsive interfaces using Ignite's declarative syntax.")
            .font(.lead)
    }
    .border(.lightGray)
    .padding()
    .cornerRadius(5)
    .frame(maxWidth: 500)
}

Building Modern Websites

Learn how to create beautiful, responsive interfaces using Ignite's declarative syntax.

Link styling

Links can have roles to control how they appear:

ForEach(Role.standardRoles) { role in
    Text {
        Link("Link with \(role.rawValue) role.", target: "#")
            .role(role)
    }
}

Link with primary role.

Link with secondary role.

Link with success role.

Link with danger role.

Link with warning role.

Link with info role.

Link with light role.

Link with dark role.

Links as buttons

Use linkStyle(.button) to style links as buttons:

ForEach(Role.standardRoles) { role in
    Text {
        Link("Button-style link with \(role.rawValue) role.", target: "#")
            .linkStyle(.button)
            .role(role)
    }
}

Button-style link with primary role.

Button-style link with secondary role.

Button-style link with success role.

Button-style link with danger role.

Button-style link with warning role.

Button-style link with info role.

Button-style link with light role.

Button-style link with dark role.