IMAGE IMAGE

rounded button

@tweet

nicely rounded button for your everyday use.

nothing new and fancy, but it has a suitable amount of padding around the text that isa must, and might be a good starting point for you more custom buttons!

// MARK: IMPORTANT🚨
/* For easy of copy/pastability, all code is in one bug chunk.
Be a dear and refactor this out any way you see fit 🤘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works 👌 */

import SwiftUI

fileprivate let fontSize: CGFloat = 20
fileprivate let fontHorizontalPadding: CGFloat = 16
fileprivate var defaultRadius: CGFloat = 24

fileprivate let lightShadowColor = Color(.displayP3, red: 0.80, green: 0.80, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 0.1803, green: 0.0470, blue: 0.4627, opacity: 1.0)

fileprivate let baseAccentColor = Color(.displayP3, red: 1, green: 0.04, blue: 0.56, opacity: 1.0)
fileprivate let baseDarkColor = Color(.displayP3, red: 0.78, green: 0, blue: 0.45, opacity: 1.0)

// MARK: IMPORTANT🚨
/* This is a just a holder view for the button, as this is button style.
You would need to adapt this to your app in a similar fashion as in this example. 👇*/
struct RoundedButtonView: View {

/*
Please please don't use the colors this way 😅 I am only adding it here so you can have a preview
for both light and dark views. You should create a new semantic color in the assets and use it that way 👌
*/
@Environment(\.colorScheme) var colorScheme

var body: some View {

let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

ZStack {
Button("rounded button") {
print("button tapped")
}
.buttonStyle(RoundedButtonStyle())
.fixedSize()
.shadow(color: shadowColor, radius: defaultRadius)
}
}
}
//------------------- REFACTOR ABOVE THIS LINE ---------------------------------------

struct RoundedButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.font(Font.system(size: fontSize, weight: .bold, design: .default))
.frame(maxWidth: .infinity)
.padding(.horizontal, fontHorizontalPadding)
.padding()
.background(configuration.isPressed ? baseDarkColor : baseAccentColor)
.cornerRadius(defaultRadius)
.foregroundColor(.white)
}
}

/*
Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it 👌
Consider helping this train rollin 🚂 on my Patreon -> https://www.patreon.com/swiftui

If you have any suggestions for improvements,
feel free to reach me at undead.pix3l@gmail.com
*/