Conditional Rendering of Internal Element Based on Component Variant

Feature Requests / Improvements
1

Hi Bricks team,

I’d like to request a feature that would improve the Component + Variant workflow in Bricks: conditional rendering of elements based on the selected component variant.

Use case:

When creating a reusable component with multiple variants (for example primary, secondary, outline, icon-only), it would be useful to control which internal elements appear depending on the active variant.

Example:

  • Variant: primary → show label and icon

  • Variant: icon-only → show icon, hide label

  • Variant: outline → show label, hide background element

Currently this requires workarounds like duplicating components or relying on custom CSS/JS.

Suggested implementation:

Add a condition in the element Conditions panel such as:

Component Variant → is → [variant name]

This would allow elements inside a component to render only when a specific variant is active.

Benefits

  • Cleaner component structure

  • Fewer duplicated components

  • Easier to maintain design systems

  • More flexible component variants

I think this would make components and variants much more powerful and easier to use.

Thanks for considering this feature.

3 Likes
2

I second this. Another solution might be to have the Variant be able to save the state of the Hide Element toggles.

As of now Variants are pretty much limited to styling only. You can’t hide an element from being rendered in the html code using Variants.

1 Like