defineButtonStyle

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

definition

ButtonStyleDefinition

required

The button style definition object.

Show definition fields

body

(configuration, props?) => Component

required

The render function that returns the styled button UI. Receives a ButtonStyleConfiguration and optional custom props.

Show ButtonStyleConfiguration

label

Component

The label component to render inside the button. This is the content passed to the Button() call.

isPressed

boolean

Whether the button is currently being pressed. Use this to apply visual feedback on press.

metadata

Record<string, any>

Optional metadata about the button style, displayed in the Composer.

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.

​Returns

​Usage

​Basic button style

​With custom props

​Applying a button style

​Press feedback with gradient

​Notes

​See Also