Buttons

Molded bevel button

A hard-cornered slab button with four inset bevel bands, a blur-free offset shadow, and a press that drops it flush onto the surface.

Using Molded bevel button

A hard-cornered slab button with four inset bevel bands, a blur-free offset shadow, and a press that drops it flush onto the surface.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, accent, bevelWidth, dropDepth, uppercase

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2199Notched offset slab buttonButtonsA blocky uppercase button floating above a hard offset shadow, finished with two folded corner tabs, that slides into its own shadow when pressed.

2501Arcade plate buttonButtonsA wide game-menu button with a grey outlined plate, an inset dark bevel and stamped lettering that brightens on hover and darkens while held down.

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.

1825Deep Slab ButtonButtonsA tall slab that floats above the page on a long diagonal shadow and sinks onto it when hovered, then slams flat on click.

2509Dialog bevel buttonButtonsA small grey system button built from two nested hard bevels and a dotted inner focus mark, whose bevel lines swap on press so it reads as pushed in.

1861Gradient Rim ButtonButtonsA button built as two stacked layers so a two-pixel shaded rim frames a slightly darker face, with a game-pad glyph.