Button borders and best practice in a design system
Hello. I'm trying to translate our UX-designers design into working buttons using scss.
They have a default state without a border, and recieves a border on :hover and on :focus. This makes the buttons take up extra space, which visibly make em dance in a way I'd like to avoid (pushing elements close to them away).
The button will be a part of a design system, the point is to make the buttons available to pretty much copy paste into other projects and work as intended.
Right now Im just presenting the buttons side by side on how they should look.
So my question is best practice approaches to the problem.
-I thought about adding a transparant border to the default state, but I am not sure if this will change the intended design och if its an accessibility issue?
(And if it's a unnecessary solution to a non important problem, i.e looking nice togheter with other elements )
-is there away to instead borrow whitespace, from example a gap or margin, instead of pushing other elements.
For example if I have a 10px gap between my buttons, when a button takes up extra 2px from receiving a border, the gap shrinks to 8px;
-is outline semantically equivalent to border. Is it ok to switch between them interchangeably. Or otherwise is placing an inner-border an okey solution?
Thanks in advance for your input:)
7 Replies
a transparent border shouldn't (normally) be a problem. Maybe we can see the design?
semantically I don't see the importance of having a border or not. The only thing you shouldn't do is use outline for default design , it takes away the chance for keyboard users to see what element is focused (unless you replace the :focus-state with something else noticeable)
Sorry for potatoe quality.
Right now the top row has gotten the transparent border to match size with the bottom row.
But also the other buttons shouldn't change size as the :focus is applied to a specific button.
hm, so the border-width also changes. mabye you can do it with a boxshadow then
I think it might be fine that the focus width is greater.
But it would be better if a single button would have some default margin or similar that would shrink on focus, so that if someone uses a button in their design. Let's say a modal confirm button. The button shouldn't push elements around on focus.
I apologize for my limited terminology knowledge.
But I'd like to do my best so that it's mainly the lone button that changes size and not the container it's in.
Don't know if that's possible. But if would be nice
it's much easier to help if you share your code in codepen or something similar
Right yes.
Https://codepen.io/isakmedia/pen/LYqRaKN
I don't have all the colors, but clicking the first buttons in each row should give the same effect.
Also maybe if you know how to align the text of the spans with the button texts that be super cool too