About this block

Pixel Buttons is a flat row of five button variants arranged in a centered, wrapping flex layout. Each button carries a solid two pixel border and a hard offset shadow that sits four pixels down and to the right, giving every button the raised, blocky look of retro pixel art. On hover the button shifts two pixels toward the shadow, halving it; on press it travels the full four pixels and the shadow disappears completely, mimicking a physical key being pushed down.

All five standard variants are present: Default, Secondary, Destructive, Outline, and Ghost. The shadow color follows currentColor on each variant, so the effect reads correctly against any fill. You can use as few or as many of the variants as your interface needs and swap the label text freely without affecting the motion behavior.

When to use

Reach for this block when your product wants a deliberate retro or arcade personality on its action buttons. A fintech or banking product that leans on a bold, graphic visual identity can use these buttons to make transaction confirms, fund transfers, and account actions feel distinct and memorable rather than generic. They work well anywhere a filled button row is used to preview interactive states, such as a design system showcase or a component reference page.

A natural flow around it on a Components page:

Before

• Cards to show the buttons in a realistic card context before the isolated demo
• Badges to establish the retro visual language before introducing the button set

After

• Shadow Buttons if you want to compare a softer lifted shadow treatment alongside this one
• Cut Corners Buttons for another sharp geometric button style that pairs with the pixel aesthetic

What you can customize

Drop in any of the five variants that match your use case, then replace the labels with your own action copy:

• Primary confirm actions. Use the Default or Destructive variant for payment confirms and irreversible actions where the press animation reinforces that something real just happened.
• Secondary controls. The Outline and Ghost variants carry the same press travel with less visual weight, keeping secondary actions in the layout without competing with the primary one.
• Component showcases. Show all five variants together on an internal design system page so your team can see the retro style applied consistently across every button role.

Tip: the press animation works best when the button is on a light background where the offset shadow has enough contrast to read clearly.