Jan 19, 2025

Button style that mimics SwiftUI Map controls

Here's how you can match the look of SwiftUI Map's controls.

struct MapButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .padding(12)
      .background(.thickMaterial)
      .foregroundStyle(.tint)
      .clipShape(RoundedRectangle(cornerRadius: 8))
      .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 2)
      .scaleEffect(configuration.isPressed ? 0.95 : 1)
      .animation(.easeInOut, value: configuration.isPressed)
  }
}

Let's see how it looks in a preview:

#Preview {
  ZStack {
    Map {
      
    }
    .mapControls {
      MapUserLocationButton()
    }
    VStack {
      HStack {
        Spacer()
        Button("Test") {
          
        }
        .buttonStyle(MapButtonStyle())
        Button {
          
        } label: {
          Image(systemName: "location")
        }
        .buttonStyle(MapButtonStyle())
      }
      .padding(.top, 60)
      .padding(.trailing, 4)
      Spacer()
    }
  }
}