Notes

Notes on engineering, developer experience, design systems, news, and tips.

Sometimes geometric alignment just looks off. When that happens, try optical alignment instead.

For example, buttons with both text and icons often need slightly smaller padding on the icon side to look balanced.

This approach works well because our eyes perceive visual weight differently depending on the shape and density of content.

Side-by-side comparison of two "Copy text" buttons. The left uses equal 16px padding on both sides (geometric). The right uses 14px on the icon side and 16px on the text side (optical).

Tooltips should describe an element that performs an action separate from opening the tooltip itself. If your tooltip is attached to an "info icon" button whose only purpose is to show the tooltip, opt for Popover and add the openOnHover prop instead.