Buttons

Double bevel button

A pale button that reads as a moulded key thanks to two opposed inner shadows, one dark from above and one bright from below, meeting behind a cool grey ramp.

Using Double bevel button

A pale button that reads as a moulded key thanks to two opposed inner shadows, one dark from above and one bright from below, meeting behind a cool grey ramp.

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, bevel, radius, showMark

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

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.

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.

2674Bevel frame buttonButtonsA square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.

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

2303Bevel swap buttonButtonsA pale slab whose lit and shaded border sides trade corners on hover while a fan of fading offset copies stamps out behind it.

2641Border brighten buttonButtonsA dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held.