Ideal Button

Default buttons fail quietly. Equal padding, a pill radius, transition: all 300ms, no press feedback. Each choice is fine on its own. Together they feel cheap.

Optical padding, not geometric

Icons carry visual weight. Equal px-6 on both sides pushes the label off center. Drop 4px on the icon side (24 to 20) so the text locks to true center. Toggle Show guides above to see it.

Press scale is non-negotiable

active:scale-[0.96] with a 150ms ease-out transform. Not 0.9 (too dramatic), not nothing (dead). The interface should feel like it heard the click.

Radius should match the system

A full pill on a dense UI reads lazy. Prefer a deliberate radius (12px here) that relates to surrounding cards and inputs. Concentric with the layout, not random.

Never transition: all

Hover is feedback, not choreography. Animate only transform and background-color over about 150ms ease-out. A 300ms ease-in hover fights the pointer and makes a fast app feel slow.

Variants still need the same rules

Solid, outline, and ghost change surface and contrast, not structure. Optical padding, press scale, radius, and fast transitions apply to every variant. Ghost is not an excuse for weaker craft.

Hit area over visual size

If the button looks small, keep the visual tight and extend the hit target with a pseudo-element to at least 40×40 (44×44 on touch). Do not fatten the chrome just to make it tappable.

Use the geometric / optical presets above, then break each principle alone to feel what each one contributes.