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

Tip: Page targets use initialized pages, so you can pass in custom values that adjust the path.

Link styling

Links can have roles to control how they appear:

ForEach(Role.badgeRoles) { 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.badgeRoles) { 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.

Created in Swift with Ignite