Inset rim icon
Square icon button with a colored background, inset top highlight, and layered outer shadow. Tailwind arbitrary values with no extra CSS.
typescriptreactbuttontailwindicon
Dependencies
Install the required packages before using this component.
Notes
On a small square only the top inset highlight reads clearly. The diffused inner layers (4..8px) add depth without competing with the icon at the center.
The border color must be a darker shade of the background, not a neutral. A neutral border visually decouples the button from its color and makes it look outlined rather than solid.
Scale inset offsets proportionally with button size: a 24px button needs 2-4px offsets, a 48px button can handle 6-10px.