Use component props in custom code | Webflow Updates

Use component props in custom code

Component props let you reference component instance values in custom code blocks. This means you can write flexible, reusable code that adapts based on the props set on each component instance.

How to reference component props

In your custom code blocks, reference props using the syntax:

{{ prop_name }}

For example, if your component has a prop called buttonColor, you can reference it in custom code like:

<style>
  .button {
    background-color: {{ buttonColor }};
  }
</style>

Example use cases

• Dynamic styling: Apply different styles based on component prop values
• Conditional logic: Show or hide elements based on prop values
• Data binding: Pass prop values to JavaScript functions or APIs
• Personalization: Create different experiences based on prop configuration

Supported code block types

Component props can be referenced in:

• Custom CSS blocks
• Custom HTML blocks
• Custom JavaScript blocks (via data attributes)

Best practices

• Use descriptive prop names that clearly indicate their purpose
• Document what values each prop accepts
• Test your code with different prop values to ensure it works correctly
• Consider using props for values that might change between component instances rather than hardcoding values