Notes

Here are some rules I use to keep my code clean and readable:

• Use descriptive names
• Avoid magic numbers
• Prefer early returns
• Prefer objects over long parameters
• Avoid mutating variables

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.

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.