Ghost icon tile
Icon-only square button with a ghost ring shadow. No border, no background fill. Built with Tailwind and motion spring tap.
typescriptreactbuttontailwindmotionicon
Dependencies
Install the required packages before using this component.
Notes
The ghost icon button is identical to the ghost secondary button minus the text - same shadow, same border-radius. This consistency means they can sit side-by-side in a toolbar without visual tension.
A relative position allows a notification dot or badge to be absolutely positioned in the top-right corner without affecting the button's layout.
At 34px the icon should be 15-16px. Larger icons make the button feel cramped; smaller ones read as decorative rather than interactive.