Buttons

Edge Collapse Button

A flat button with a thick colored lip along its bottom edge that folds down to a hairline as the button drops onto it.

Using Edge Collapse Button

A flat button with a thick colored lip along its bottom edge that folds down to a hairline as the button drops onto it.

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, lip, snapMs

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

2765Embossed press buttonButtonsA solid rounded button that reads as a raised physical key at rest and flips to a recessed, pressed-into-the-surface look on hover, focus and press.

2371Inset Edge PillButtonsA pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover.

2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.

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

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.

2583Capsule in frame buttonButtonsA bordered outer tray holding a floating inner capsule that sinks into the frame for the length of a press.