Show/hide drop shadow in component

I have created a Button component. Now I would like to optionally add a drop shadow.

With the Boolean Properties it’s possible to show or hide elements. I would like to show or hide the drop shadow. The background of my button is not a separate element, it just the colored background of the text. I have no option to set the Boolean setting on the layer with the shadow.

Does anyone have a tip?

Well, just make a background as a separate layer, place it absolutely, set constraints to take the whole space and bind boolean prop to it. Done :wink:

1 Like

Hi @Cherryblossom36, Thank you for reaching out about Boolean Properties. I understand how handy that the drop shadow in a component has a boolean property.

I completely agree with the @Pavel_Kiselev method (Thank you so much!) so please give it a try!
Below is a visual supplement for you, and you can check the details for Absolute position here:Explore auto layout properties

I hope this information sheds some additional light for you! Please let us know if we are missing any additional points!



Thank you so much! I didn’t know about the absolute position in auto layout! That’s the solution. :slight_smile:

1 Like

Thanks for the background tip! I, however don’t think this is a long-term solution. We build our components to better align with code and have as few layers as possible. Buttons, don’t have separate backgrounds in CSS; the color is set as a box (aka the Frame) style, as is the drop shadow. So, at some point, including effects for booleans (along with a number of other things) would be better than having to create separate background, particularly for components more complex than a button.

1 Like

edit: booleans for effects.