SwiftUI Buttons | Liquisset

Buttons are one of the core components when building any user interface, serving both as a means to trigger an action and as a way to navigate to different pages.

Liquisset offers an extensive selection of styles and sizes for the button component. This includes options like outlined buttons, a wide range of colors, different sizes, buttons featuring icons, and many more variations to choose from.

Simple Button

Default button with custom text.

LQButton {
    Text("Simple Button")
        .foregroundColor(.white)
        .bold()
}

Disabled Button

Pass a State to indicate wheter or not your icon should be disabled.

LQButton(isDisabled: .constant(true)) {
    Text("Disabled button")
        .foregroundColor(.white)
        .bold()
}

Icon Button

Use Icons to improve the appearance of your button. Customize the corner radius and background color creating a custom LQButtonStyle instance.

var iconStyle: LQButtonStyle = .init(backgroundColor: Color(hexString: "#f5bc53"), cornerRadius: 12)

LQButton(style: iconStyle) {
    HStack {
        Image(systemName: "star.fill")
            .resizable()
            .frame(width: 24, height: 24)
            .foregroundColor(.white)
        Text("Icon Button")
            .foregroundColor(.white)
            .bold()
    }
}

Pill Button

Get full rounded corners just by using the isPill property. Execute a custom action on button click.

var pillStyle: LQButtonStyle = .init(backgroundColor: Color(hexString: "#7bf553"), isPill: true)

LQButton(action: {
    print("Executing pill button")
}, style: pillStyle) {
    Text("Pill Button")
        .foregroundColor(.white)
        .bold()
}

Buttons image

Execute Actions

Use the action closure to execute custom code when clicking the button.

LQButton(action: {
    awesomeFunction()
}) {
    Text("Button with click")
        .foregroundColor(.white)
        .bold()
}

Customize Buttons

Each Liquisset component comes with multiple options to customize. Just create a custom instance of LQButtonStyle and set the properties you want.

LQButtonStyle.swift

public init(
    width: CGFloat? = nil,
    height: CGFloat? = nil,
    backgroundColor: Color? = nil,
    isPill: Bool? = nil,
    cornerRadius: CGFloat? = nil,
    strokeWidth: CGFloat? = nil,
    strokeColor: Color? = nil
)

ContentView.swift

var customStyle: LQButtonStyle = .init(
    width: .infinity,
    height: 240,
    backgroundColor: .pink,
    isPill: false,
    cornerRadius: 12,
    strokeWidth: 1,
    strokeColor: .black
)

LQButton(style: customStyle) {
    Text("Custom Style")
      .foregroundColor(.white)
      .bold()
}

If you don't pass a style object, you'll get the button's default skin.