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

Link styling

Links can have roles to control how they appear:

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

Link with default 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:

for role in Role.allCases {
    // The default role isn't very interesting
    if role != .default {
        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 with Ignite