Buttons

Dialog bevel button

A 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.

Using Dialog bevel button

A 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.

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, size, isDefault

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

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

2645Double bevel buttonButtonsA 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.

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.

2165Hard edge key buttonButtonsA compact hardware-style key that flips its highlight, outline and shadow inward the instant you press it.

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

1878Radial sheen buttonButtonsA short key-like button lit from its top-right corner, with a hairline base edge that inverts when pressed.