Search blocks by description or jump to a page.
Buttons with a skewed, slanted shape for a sense of dynamic energy. Suits sports, fitness, and bold marketing pages that want forward momentum.
Skew Buttons shows all five standard button variants arranged in a single centered, wrapping row. Each variant sits at rest as a normal rectangle and tilts forward along the horizontal axis when hovered, giving the row a sense of motion without changing the button's fill or label. The five variants covered are Default, Secondary, Destructive, Outline, and Ghost, so every semantic role in a typical action set is represented.
The layout is a flat row with no headings or supporting text, which keeps the focus on the buttons themselves. You can drop in as many or as few variants as your page needs, swap the labels for real action copy, and place the block wherever a cluster of actions belongs.
This block fits well on a project management workspace where multiple actions compete for attention on the same surface. The tilt on hover signals interactivity without resorting to color changes, which is useful when the page already carries a lot of visual weight. Compared to a static button row, the skew effect adds enough kinetic energy to guide a user toward the next step without demanding it.
A natural flow around it on a Components page:
Before
After
Five independent buttons share a single row, each styled by its variant. Here are a few ways to put them to work:
Tip: limit the row to the variants your page actually uses. Removing Ghost or Secondary keeps the cluster tight and reduces visual noise.