> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# defineButtonStyle

> Defines a custom button style that can be applied to buttons via the .buttonStyle() modifier.

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

<ParamField path="definition" type="ButtonStyleDefinition" required>
  The button style definition object.

  <Expandable title="definition fields">
    <ParamField path="body" type="(configuration, props?) => Component" required>
      The render function that returns the styled button UI. Receives a `ButtonStyleConfiguration` and optional custom props.

      <Expandable title="ButtonStyleConfiguration">
        <ParamField path="label" type="Component">
          The label component to render inside the button. This is the content passed to the `Button()` call.
        </ParamField>

        <ParamField path="isPressed" type="boolean">
          Whether the button is currently being pressed. Use this to apply visual feedback on press.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="metadata" type="Record<string, any>" optional>
      Optional metadata about the button style, displayed in the Composer.
    </ParamField>
  </Expandable>
</ParamField>

## 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

```typescript theme={null}
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

```typescript theme={null}
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.

```typescript theme={null}
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

```typescript theme={null}
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

* [defineComponent](/bindjs/functions/defineComponent) -- for defining standard components