Ghost icon tile
Icon-only square button with a ghost ring shadow. No border, no background fill. Built with Tailwind and framer-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.