Buttons

Badges are tappable elements on your page that can run various actions when pressed, optionally with a role attached to add styling.

For example, here's a primary button that shows an alert when pressed:

Text {
    Button("Say Hello") {
        ShowAlert(message: "Hello, world!")
    }
    .role(.primary)
}

Button actions can contain multiple commands, all of which get compiled to JavaScript when your site is built.

For example, this code shows two pieces of text, and buttons that toggle between them:

Text {
    Button("Show First Text") {
        ShowElement("FirstText")
        HideElement("SecondText")
    }
    .role(.primary)
}

Text {
    Button("Show Second Text") {
        HideElement("FirstText")
        ShowElement("SecondText")
    }
    .role(.secondary)
}

Text("This is the first text.")
    .font(.title3)
    .id("FirstText")

Text("This is the second text.")
    .font(.title3)
    .id("SecondText")
    .hidden()

This is the first text.

This is the second text.

All the same actions you can use with buttons can also be used with event handlers, such as onClick() or onHover(). For example:

Hover over this text to make a message appear below.

Hey, listen!

If you want your button to act as a link somewhere else, it’s better to use Link with .linkStyle(.button), like this:

Text {
    Link("This is a link button", target: ContentExamples())
        .linkStyle(.button)
}

This is a link button

Styling buttons

As with other several other element types, buttons can have roles attached to them to customize how they look. There is also a buttonSize() modifier to adjust how big buttons are:

for role in Role.allCases {
    for size in ButtonSize.allCases {
        Text {
            Button("\(size.rawValue.capitalized) button with \(role.rawValue) role")
                .buttonSize(size)
                .role(role)
        }
    }
}

Created with Ignite