FioriButton

public struct FioriButton : View

A control which is able to display different views depending on current tap state and responds to action.

Create a Fiori button by providing an action and different labels depending on states.

FioriButton(action: { state in
    print("Button tapped with state: \(state)")
},
label: { state in
    switch state {
    case .normal:
        Text("Normal")
    case .highlighted:
        HStack {
            Image(systemName: "checkmark")
            Text("Highlighted")
        }
    case .selected:
        HStack {
            Image(systemName: "checkmark")
            Text("Selected")
        }
    default:
        Text("Disabled")
    }
})

Create a Fiori button with title text.

FioriButton { _ in "Start" }

Style customization

Create a style that conforms to FioriButtonStyle. There are three predefined Fiori button styles: FioriPrimaryButtonStyle, FioriSecondaryButtonStyle, and FioriTertiaryButtonStyle. To set the style to a FioriButton or to a container within which all Fiori buttons should share the same style, use the fioriButtonStyle(_:) modifier.

struct CustomFioriButtonStyle: FioriButtonStyle {
    func makeBody(configuration: FioriButtonStyle.Configuration) -> some View {
        let color: Color
        switch configuration.state {
        case .normal:
            color = Color.preferredColor(.tintColor)
        case .highlighted, .selected:
            color = .red
        default:
            color = Color.preferredColor(.primary3)
        }

        return configuration.label
            .foregroundColor(.white)
            .padding(50)
            .background(Circle().fill(color))
    }
}

To apply these styles to a Button, use PrimaryButtonStyle, SecondaryButtonStyle, and TertiaryButtonStyle instead.