About this block

Morphing Buttons displays five buttons in a centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Every button starts with a slightly rounded rectangle corner and smoothly transitions to a full pill shape on hover, giving each variant the same consistent motion while preserving its own fill, border, and color treatment.

All five variants are independent. You can keep only the ones your interface needs, reorder them, or relabel each button without affecting the others. The hover animation is the same across every variant, so mixing and matching subsets still looks intentional and cohesive.

When to use

Reach for this block on a developer tools company's component showcase, documentation site, or design system preview page where you want to show the full range of available button styles in one place. It works better than a plain static grid when the goal is to demonstrate interactive behavior rather than just surface color tokens.

A natural flow around it on a Components page:

Before

• Interactive Buttons to show click and press feedback before introducing shape transitions
• Badges to set visual context around status labels that often sit near action buttons

After

• Cards where these button variants are likely to appear in a real layout
• Slide Buttons to continue the motion theme with a label or color reveal on hover

What you can customize

The block covers all five standard variants in one preview. A few focused ways to adapt it:

• Subset to your variants. Remove any variants your product does not use so the demo stays relevant to your actual design system.
• Relabel each button. Swap "Default" and "Destructive" for the real action names your app uses, such as "Deploy" or "Delete", to make the preview feel production ready.
• Adjust the transition speed. The animation duration is the one value most worth tuning to match the overall tempo of your interface.

Tip: if you use this block in documentation, place the Destructive variant last or visually separated so readers do not read the red as an error state on the page itself.