Skip to main content
defineButtonStyle(definition: {
    body: (configuration: ButtonStyleConfiguration, props?: Record<string, any>) => Component;
    metadata?: Record<string, any>;
}): ButtonStyleComponent;
​
definition
ButtonStyleDefinition
required
The button style definition object.

​
Returns

A ButtonStyleComponent that can be passed to the .buttonStyle() modifier on any Button. The returned style can also be called with props to customize its appearance per-use.

​
Usage

​
Basic button style

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 })

​
With custom props

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 })

​
Applying a button style

Button styles are applied using the .buttonStyle() modifier. Pass the style directly or call it with props to customize per-use. 
const body = (props) => {
    return VStack({ spacing: 16 }, [
        Button("Submit", () => {
            // handle tap
        }).buttonStyle(MyButtonStyle),

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

​
Press feedback with gradient

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 })

​
Notes

  • Button styles do not support view modifiers on the style itself — they only style button appearances.
  • The label in ButtonStyleConfiguration is the content passed as the first argument to Button(). It can be a string (rendered as Text) or a custom component tree.
  • The isPressed state updates automatically when the user touches or clicks the button.
  • When calling the style with props (e.g., MyStyle({ color: "red" })), those props are available as the second argument to the body function.
  • The style must be assigned to exports.default to be recognized as a button style component.

​
See Also