defineButtonStyle

defineButtonStyle(definition: {
    body: (configuration: ButtonStyleConfiguration, props?: Record<string, any>) => Component;
    metadata?: Record<string, any>;
}): ButtonStyleComponent;

const body = (configuration) => {
    return Capsule()
        .fill(Color("blue"))
        .overlay(
            configuration.label
                .foregroundStyle(Color("white"))
        )
        .frame({ height: 44 })
        .opacity(configuration.isPressed ? 0.7 : 1)
}

exports.default = defineButtonStyle({ body })

const body = (configuration, props) => {
    return RoundedRectangle({ cornerRadius: 12 })
        .fill(Color(props?.color || "blue"))
        .overlay(
            configuration.label
                .foregroundStyle(Color("white"))
                .font("headline")
        )
        .frame({ height: 50 })
        .scaleEffect(configuration.isPressed ? 0.95 : 1)
}

exports.default = defineButtonStyle({ body })

const body = (props) => {
    return VStack({ spacing: 16 }, [
        Button("Submit", () => {
            // handle tap
        }).buttonStyle(MyButtonStyle()),

        Button("Delete", () => {
            // handle tap
        }).buttonStyle(MyButtonStyle({ color: "red" }))
    ])
}

const body = (configuration) => {
    return ZStack([
        RoundedRectangle({ cornerRadius: 16 })
            .fill(
                LinearGradient({
                    colors: [Color("blue"), Color("purple")],
                    startPoint: "leading",
                    endPoint: "trailing"
                })
            ),
        configuration.label
            .foregroundStyle(Color("white"))
            .font("headline")
    ])
    .frame({ height: 56 })
    .scaleEffect(configuration.isPressed ? 0.96 : 1)
    .opacity(configuration.isPressed ? 0.9 : 1)
}

exports.default = defineButtonStyle({ body })