little trick on how to automate visual alignment

💯 we use this technique throughout our system to maintain balance when showing/hiding decorations. one edge case: optical balance for icons that don't follow the icon grid (like carets), where we apply negative margins for consistent visual weight.

ofc you'd also set a fixed height lol

Love this trick. Been doing this in our design systems as well.

do the same all the time, only i instead wrap the icon, haha. great tip. this is the correct approach. ✦

Using this same technique in the Noora design system:

Great tip

@leyeConnect This is magical 👏😂

cool trick

Adopt me as your apprentice @aaronmahlke lmao 😂 this is really cool.

@leyeConnect , you might wanna see this as some sort of "update" or "addendum" to your visual alignment sheet

nice one

QQ: When doing this in code? Is it ok to wrap the content in a div within the button or we should do it differently?

totally fine to wrap the content in a div or span

Nice tip!!

What about having a button with 2 elements each having their own padding, wouldn't that make it look balanced? <button> <span style="padding-left: 2px" >x</span> <span style="padding: 2px" >delete</span> </button> Or is the point of the demo something else?

yup can work for sure. but usually icons already have a frame / bounding box that includes some space around the actual icon. which is why it looks of-balance if you don't also add some padding to the text.

Ah ok that makes sense! Thanks!

Niceee

Aaron gave us a great tip... thank you so much. we want more pls

that's amazing, yes - I wish more companies would adopt this in their design system

You can also wrap the icon into a frame that is as wide as the icon minus the space you want to visual align. Nicer if you ask me, since the regular button without icons is not affected + it’s clearer what the intention is (when implementing)

shift + a

If you’ve ever worked on real stuffs, you’d know devs won’t bother doing all of that custom padding anyway LMFAO