Buttons

Carved Pill Button

A pill carved into a soft matte surface by opposing inner shadows, rising into a raised pad the moment it is hovered or focused.

Using Carved Pill Button

A pill carved into a soft matte surface by opposing inner shadows, rising into a raised pad the moment it is hovered or focused.

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, surface, accent, depth, radius, raiseOnHover

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

2533Soft inset press buttonButtonsA near-black slab that sits above a matching panel on two opposing soft shadows, sinks into the surface while held and rises again on release.

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.

2191Molded key send buttonButtonsA send button molded out of the page itself: a raised outer shell holding a recessed inner pill with a paper plane and a label.

2691Rim ramp buttonButtonsA thick coloured rim surrounds a dark inner face; on hover the face clears and the rim's colour ramp floods the whole button.

2514Soft relief buttonButtonsA pale pill lifted by a warm highlight on one side and a cool shadow on the other, both tightening on hover and vanishing entirely when it is held flush.

2519Soft relief send buttonButtonsA send button moulded out of a light surface: a two tone rim around a soft inner pad with a filled send glyph that sinks flat while held.