TestStrokedBorderedRoundedRectangleButton.swift

import SwiftUI

struct TestButton: View {
  var body: some View {
    VStack(spacing: 16) {

      Button {
      } label: {
        Label("Default", systemImage: "face.smiling")
      }

      Button {
      } label: {
        Label("Plain", systemImage: "face.smiling")
      }
      .buttonStyle(.plain)

      Button {
      } label: {
        Label("Borderless", systemImage: "face.smiling")
      }
      .buttonStyle(.borderless)

      Button {
      } label: {
        Label("Bordered", systemImage: "face.smiling")
      }
      .buttonStyle(.bordered)

      Button {
      } label: {
        Label("BorderedProminent", systemImage: "face.smiling")
          .foregroundColor(.white)
          .padding(EdgeInsets(top: 6, leading: 10, bottom: 6, trailing: 10))
          .background(
            RoundedRectangle(cornerRadius: 6)
              .foregroundColor(.blue)
          )
          .compositingGroup()
//          .shadow(radius: 5, x: 0, y: 3)
          .contentShape(Rectangle())
      }
      .buttonStyle(.plain)

      Button {
      } label: {
        Label("BorderedProminent", systemImage: "face.smiling")
      }
      .buttonStyle(.borderedProminent)


      Button {
      } label: {
        VStack {
          Label("Plain", systemImage: "face.smiling")
          Text(".background(.orange)")
            .font(.caption)
          Text(".containerShape(.rect(cornerRadius: 16))")
            .font(.caption)
        }
        .foregroundStyle(.white)
        .padding()
        .background(.orange)
        .containerShape(.rect(cornerRadius: 16))
      }
      .buttonStyle(.plain)

      Button {
      } label: {
        VStack {
          Label("Plain", systemImage: "face.smiling")
          Text(".background(.orange, in: .rect(cornerRadius: 16))")
            .font(.caption)
        }
        .foregroundStyle(.white)
        .padding()
        .background(.orange, in: .rect(cornerRadius: 16))
      }
      .buttonStyle(.plain)

      Button {
      } label: {
        VStack {
          Label("BorderedProminent", systemImage: "face.smiling")
          Text(".tint(.orange)")
            .font(.caption)
        }
        .padding()
      }
      .buttonStyle(.borderedProminent)
      .tint(.orange)

      // plain + label view modifiers

      Button {
      } label: {
        VStack {
          Label("Plain", systemImage: "face.smiling")
          Text(".background(.orange, in: .rect(cornerRadius: 16))")
            .font(.caption)
          Text(".overlay()")
            .font(.caption)
        }
        .foregroundStyle(.white)
        .padding()
        .background(.orange, in: .rect(cornerRadius: 16))
        .overlay(RoundedRectangle(cornerRadius: 16).stroke(.gray))
      }
      // default // NG
      .buttonStyle(.plain) // OK
//    .buttonStyle(.bordered) // NG
//    .buttonStyle(.borderless) // no effect
//    .buttonStyle(.borderedProminent) // NG

      // borderProminent + overlay
      Button {
      } label: {
        VStack {
          Label("BorderedProminent", systemImage: "face.smiling")
          Text(".overlay()")
            .font(.caption)
        }
        .padding()
      }
      .buttonStyle(.borderedProminent)
      .tint(.orange)
      #if os(macOS)
      //.buttonBorderShape(.roundedRectangle(radius: 16)) // NG
      .clipShape(.rect(cornerRadius: 16))
      //.containerShape(.rect(cornerRadius: 16)) // NG
      #endif
      .overlay(RoundedRectangle(cornerRadius: 16).stroke(.gray))

      // custom style

      Button {
      } label: {
        VStack {
          Label("Custom Button Style", systemImage: "face.smiling")
          Text("extension ")
            .font(.caption)
        }
      }
      .buttonStyle(.strokeRounded)
    }
  }
}

struct StrokeRoundedRectangleButtonStyle: ButtonStyle {
  var cornerRadius: CGFloat

  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .foregroundStyle(
        .white.opacity(configuration.isPressed ? 0.75 : 1)
      )
      .padding()
      .background(
        .orange.opacity(configuration.isPressed ? 0.75 : 1),
        in: .rect(cornerRadius: cornerRadius)
      )
      .overlay(
        RoundedRectangle(cornerRadius: cornerRadius)
          .stroke(.gray.opacity(configuration.isPressed ? 0.75 : 1))
      )
  }
}

extension ButtonStyle where Self == StrokeRoundedRectangleButtonStyle {
  static var strokeRounded: Self { Self(cornerRadius: 16) }
}

#Preview("TestButton") {
  TestButton()
    .padding()
  #if os(iOS)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
  #else
    .frame(height: 800)
  #endif
    .background(
      LinearGradient(
        gradient: Gradient(colors: [.white, .pink]),
        startPoint: .topLeading, endPoint: .bottomTrailing
      )
    )
}