ActionButton

Button alternative providing built-in states for .enabled, .disabled, and .loading.

action-button-example.mov


How to Use

  1. Import ActionButton
  2. Create a state or binding variable of type ActionState. This will drive the content of ActionButton
  3. Add ActionButton to your view and configure it.

Below is a an example of the code used in the video demo above. So how do we animate between states?

@State var actionButtonState: ActionButtonState =
    .enabled(.init(title: "Load Something", systemImage: "bolt"))

var body: some View {

    VStack {

        Text("Just a little button.")
        ActionButton(state: $actionButtonState, onTap: {

            loadSomething()
        }, backgroundColor: .red)
            .frame(maxWidth: 250)
    }
}

Animating between states.

Animating between states is handled automatically. Take a look at our loadSomething() function.

private func loadSomething() {

    actionButtonState = .loading(.init(title: "Loading", systemImage: "bolt"))

    DispatchQueue.main.asyncAfter(deadline: .now() + 1.25) {

        actionButtonState = .disabled(.init(title: "Loaded", systemImage: "checkmark"))
    }
}

In our example, we use a delay to simply change the state variable actionButtonState. The view responds accordingly.

Configuration

ActionButton takes in a handful of parameters in its initialization.

  • state: ActionButtonState – This is an enum (enabled, loading, disabled) with an associated value of type ActionButtonModel which allows you to set the SFSymbol and text of the button.
  • onTap: (() -> Void) – A callback to handle any taps. This is required since ActionButton handles its own tap animation. Your own onTapGesture won’t work here.
  • backgroundColor: Color – the background color for the button during its enabled state.
  • foregroundColor: Color – the foreground color for the button during all states.

GitHub

https://github.com/swiftui-library/action-button