Skip to main content
The defineButtonStyle function creates custom button styles that can be applied to buttons using the buttonStyle modifier. Button styles receive a configuration object with the button’s label and optional props to customize the appearance. 
export default defineButtonStyle({
  body,
  metadata
})

​
Parameters

The function accepts a single object with the following properties:
  • body (required) - The button style’s body function (configuration, props) => Component
  • metadata (optional) - Metadata about the button style (title, description, etc.)

​
Configuration Object

The body function receives a configuration object with:
  • label - The label component to render inside the button
  • isPressed - Boolean indicating if the button is currently pressed

​
Returns

Returns a ButtonStyleComponent that can be applied to buttons via the buttonStyle modifier. Note: Button style components do not support modifiers and are only used for styling buttons.

​
Basic Example

const body = (configuration, props) => {
  return Capsule()
    .fill(Color(props?.color || 'blue'))
    .frame({ height: 44 })
    .overlay(
      configuration.label
        .foregroundStyle(Color('white'))
        .fontWeight('semibold')
    )
}

const metadata = {
  title: 'Capsule Button Style',
  description: 'A button style with capsule shape'
}

export default defineButtonStyle({ body, metadata })

​
Advanced Examples

​
Button with Gradient Background

const body = (configuration, props) => {
  const gradient = LinearGradient({
    colors: [props?.startColor || 'blue', props?.endColor || 'purple'],
    startPoint: 'topLeading',
    endPoint: 'bottomTrailing'
  })

  return RoundedRectangle({ cornerRadius: 12 })
    .fill(gradient)
    .frame({ height: 50 })
    .overlay(
      configuration.label
        .foregroundStyle(Color('white'))
        .fontWeight('bold')
    )
    .shadow({ radius: 4, y: 2 })
}

export default defineButtonStyle({ body })

​
Button with Border and Custom Padding

const body = (configuration, props) => {
  const borderColor = props?.borderColor || 'blue'
  const backgroundColor = props?.backgroundColor || 'transparent'

  return RoundedRectangle({ cornerRadius: 8 })
    .fill(Color(backgroundColor))
    .stroke({ style: Color(borderColor), lineWidth: 2 })
    .overlay(
      configuration.label
        .foregroundStyle(Color(borderColor))
        .padding(12)
    )
}

export default defineButtonStyle({ body })

​
Button with Pressed State

const body = (configuration, props) => {
  const baseColor = props?.color || 'blue'
  const pressedColor = props?.pressedColor || 'darkblue'
  
  const backgroundColor = configuration.isPressed 
    ? pressedColor 
    : baseColor

  return Capsule()
    .fill(Color(backgroundColor))
    .frame({ height: 44 })
    .overlay(
      configuration.label
        .foregroundStyle(Color('white'))
        .fontWeight('semibold')
    )
    .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
}

export default defineButtonStyle({ body })

​
Using Button Styles

Once defined, button styles can be applied to buttons using the buttonStyle modifier: 
const body = (props, children) => {
  return VStack([
    Button("Primary Action", () => {})
      .buttonStyle(MyButtonStyle()),

    Button("Custom Color", () => {})
      .buttonStyle(MyButtonStyle({ color: 'red' }))
  ])
}

​
Passing Props to Button Styles

Button styles can accept custom props to make them configurable: 
// Define the button style with props support
const body = (configuration, props) => {
  const size = props?.size || 'medium'
  const height = size === 'small' ? 36 : size === 'large' ? 56 : 44

  return Capsule()
    .fill(Color(props?.color || 'blue'))
    .frame({ height })
    .overlay(configuration.label.foregroundStyle(Color('white')))
}

exports.default = defineButtonStyle({ body })

// Use with different props
Button("Small", () => {})
  .buttonStyle(MyButtonStyle({ size: 'small', color: 'green' }))

Button("Large", () => {})
  .buttonStyle(MyButtonStyle({ size: 'large', color: 'red' }))

​
Important Notes

  • Button style components do not support modifiers - they are specialized for button styling only
  • The configuration.label is a component that represents the button’s content
  • Button styles are applied using the .buttonStyle() modifier on Button components
  • Props can be passed to button styles to make them customizable
  • The isPressed state can be used to create interactive press effects
  • Button styles are ideal for creating consistent button designs across your application