About this block

Cut Corners Buttons shows five button variants arranged in a single centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Each button has its top left and bottom right corners sliced off at an angle, giving it a sharp parallelogram silhouette. On hover the clipped corners expand back out to full rectangles, so the shape transitions smoothly from geometric to standard without any fill or color change.

All five variants share the same clip and transition, so the set reads as a unified family. The label text, the number of variants you include, and the order you arrange them are all straightforward to adjust. You can drop in one variant where a single call to action is needed, or keep the full row as a reference palette.

When to use

This set fits an AI assistant product where clean, angular styling signals precision without feeling cold. The cut corner shape adds visual character to a landing page or onboarding flow that would otherwise rely on plain rounded buttons. It works better than a standard button row when the surrounding interface already leans into geometric shapes, because the hover transition reinforces that motion language rather than fighting it.

A natural flow around it on a Components page:

Before

• Extra Large Buttons to anchor a hero call to action above a more detailed button set
• Badges to label a feature or status before the action row

After

• Cards where the same cut corner buttons can appear inside individual feature or pricing cards
• Interactive Buttons if you want to show a motion variant alongside the shape variant

What you can customize

Each button is a standalone component, so you can pick exactly the variants your interface needs. Three common approaches:

• Single primary action. Pull out only the Default variant and place it at the end of a hero paragraph where one sharp button is enough.
• Paired primary and ghost. Use Default alongside Ghost for a main action and a quieter secondary option on the same row.
• Full variant palette. Keep all five as a component showcase on a design system or documentation page where teams need to see every state at once.

Tip: the hover transition looks sharpest when the button sits against a flat background with generous space around it, so the corner expansion has room to read clearly.