Slide Buttons

About this block

Slide Buttons is a row of five buttons shown side by side in a wrapping flex layout. Each button carries a translucent overlay layer clipped behind its left edge at rest. On hover, that overlay slides in from the left across the full button face, creating a smooth wash of color that reveals a second visual state without changing the label or shape. The five variants shown are Default, Secondary, Destructive, Outline, and Ghost, so you can see the effect across the full range of button roles in one preview.

Every button is independent. You can use any one of them in isolation, keep only the variants that fit your page, or adjust the label copy freely. The slide direction and overlay timing come from the animation layer, so swapping labels or rearranging the set does not affect the motion behavior.

When to use

Reach for this block when you want hover feedback that feels intentional without overwhelming the surrounding content. It suits an AI assistant product interface where the interface needs to feel polished and responsive without calling too much attention to itself. The slide is subtler than a color swap and more directional than a fade, so it reads as purposeful on prompt submission buttons, model selector triggers, and confirmation actions. Where a grow button adds scale and mass, the slide keeps the button footprint fixed and just shifts the visual weight, which works better in compact toolbars or inline controls.

A natural flow around it on a Components page:

Before

• Badges to label a new feature or beta status above the action
• Cards that surface a feature or pricing tier the button confirms

After

• Alerts to acknowledge the action the button triggered
• Interactive Buttons if you need state changes beyond the hover moment

What you can customize

Each variant maps to a distinct role in a standard button hierarchy, and all five are ready to drop into place:

• Default and Secondary together. Pair them as the primary and supporting action in a two button row for any confirmation dialog or feature prompt.
• Destructive for high stakes actions. The slide overlay on the red variant softens the warning just enough to keep the page calm while still signaling consequence.
• Ghost for quiet inline controls. The ghost variant carries the slide effect without a visible border or fill at rest, so it works inside toolbars and dense UI panels that cannot afford visual weight.

Tip: the slide reads best against a flat background; avoid placing these buttons over a patterned or image background where the overlay wash becomes hard to see.