Hide button style drop-down options

Currently, the button element has a Style drop-down with options like secondary, muted, info, etc. Could options be hidden if they are not set in the theme styles section? Perhaps the whole drop-down should be hidden if none are set? I see that there are default colors when switching but this might create some confusion for novice users.

Sorry, I wasn’t sure if this should be posted on the idea board or here since it’s a minor idea/request.

Hi, I don’t think this is correct, but I think i know what you mean.

If you have not set a specific theme style then the element has the default settings. So for the button this is as the styles drop down. It doesn’t matter if you set a theme style or not, those values are still valid and should be shown.

The issue arises when you override a Buttons style using the Style tab and changing say the background. Once you do that then the drop down button styles no longer have any effect. This is where some confusion is caused when you click /select something, say Primary, and nothing changes.

Maybe there needs to be some sort of indicator on the Style drop down to make it clear that it has been overriden. Simply hiding it, I think, would really confuse people. ( People like me who often forget what tweaks they may have made weeks ago. )

Maybe a special Override icon or a tooltip? Maybe greyed out options in the drop down.

Also maybe make it clear that when you override a value you are changing the whole style of the element, not just the one that was selected previously. e.g. Set the button style to Success then change the background/typography values and you might think that this only applies to the Success style of the button and changing it to Primary would flip it, but it doesn’t. Lol so many areas for confusion.

Cheers
Alan

Hi Josh & Alan,
phew… you’ve chosen a relatively complex topic that seems quite simple at first glance :smiley:

I understand the approach, but I’m not sure if hiding the different button styles is the perfect solution as long as they are not defined in the theme styles.

Basically, yes, any element can be overridden (now even by class-based styling) even if it has predefined styles. And in the case of buttons, the different styles offer different uses. For everything else, the “Default” button can and should be used, because otherwise there is the danger that green buttons are suddenly red and get a completely different statement.

We are currently working on expanding the Bricks Academy and providing documentation for each element. This is a lot of work, but I think it will be worth it because we can point out such “basic” things (which can still be complicated).

Totally makes sense and I can see where these could come in handy later for woocommerce and bootstrap-based plugin styling. I really like the idea of button styles as they offer a similar solution to classes, but are easier for a beginner user to apply.

I was envisioning my more design-focused co-workers seeing these options and getting confused as to why I set them up.

This is old but would really appreciate a feature like this. For example, I’d like to limit the dropdown to just allow Primary, Secondary, Light, Dark. No need for editors to choose muted, success, warning, etc.

Workaround I just came up with is below, loaded into Bricks editor. But it scares me as you might change classes or data attributes in the editor at some point:

[data-controlkey="style"] .dropdown > li:nth-child(n+5) {
  display: none;
}