About this block

Interactive Buttons is a set of five outline, ghost, and filled buttons, each pairing a Lucide icon with a short label. The buttons sit in a centered wrapping row with even spacing. Every button responds to hover with its own distinct animation: the Heart fills red and pulses, the ThumbsUp tilts and gains a growing underline, the Star spins and fills yellow, the Bell plays a ring motion, and the Zap scales up while a shimmer sweeps across its label. Each icon and label shift color together as a unit so the whole button reacts as one.

The five buttons are fully independent. You can drop in any number of them, swap the icons and labels for your own actions, or mix in different button variants without affecting the others. The hover animations are self-contained on each button so removing one never breaks the rest.

When to use

Reach for this block on a product analytics dashboard or an activity feed where engagement actions like liking, approving, starring, and boosting need to feel tactile and rewarding. The per-icon motion makes each action distinct, which helps users build muscle memory faster than a row of identical plain buttons would. Where Grow Buttons apply a single uniform scale effect, this set gives every action its own personality.

A natural flow around it on a Components page:

Before

• Cards to display the content item these actions apply to, giving users something to react to
• A plain section heading or short description to introduce the action row

After

• Badges to reflect the updated count or state after an action fires, closing the feedback loop
• Alerts to confirm a completed action such as a successful notification subscription

What you can customize

Each button is an independent unit, so you can mix and match to fit your action set:

• Icon and label pairing. Swap any Lucide icon and its matching label text to represent the exact engagement actions your product offers.
• Button variant. Each button uses outline, ghost, or filled independently, so you can weight a primary action visually without changing its animation.
• Hover color accents. The icon and label share a hover color token, so pointing them at a different color updates both elements at once.

Tip: limit the row to four or five actions so the animations do not compete. Too many buttons in one row dilutes the effect each one creates.