Border inside/outside

Is there an option I’m missing to control where the border sits… (without custom css) e.g. center, inside or outside…

In my design system, I have an outlined button and a contained button… The issue is that the outline is adding 2px in height (1px top and 1px bottom) for my outlined button…

To work around I’m adding a border to my filled button, and making it the same colour as the button, but it’s not ideal.

Why??

Well because it means there is inconsistency in my design and reusable elements… on sections/pages where my contained buttons are accompanied by an outlined button, I need to make them 38px in height with a border… and on sections/pages where they are alone I need to make them 40px height with no border…

Just an additional annoying overhead to manage across a number of pages/features, when really it’s quite a generic feature that is common in CSS and a lot of UI design builders e.g. Figma…

Why can’t you think that both have 38px and 1px of border? It is just perspective…
One have black border. The other green.

Go away please.

:joy: @rpetribu is right here. This is definitely an inconvenience for sure. The minor adjustment to keep both button styles in sync would be to add the same 1px border to the green button and just make the border the same color as the button.

Hope that helps!

1 Like

Just trying to avoid having to update everything in my design system… Which is more than a minor inconvenience, but was just looking to find a definite answer before I started that journey.

Thanks for the positive response.

1 Like

It’s definitely frustrating for sure. There’s a few different ways to design a button. Text within groups, button elements, using padding, etc. Maybe Bubble will streamline this in the future.

Yeah… he knows :rofl:
He just didn’t want to admit it

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.