Buttons

Inlaid edge button

A button built like an inlaid plate: a lit-to-dim rim, a recessed panel sunk inside it, and a label that brightens when the pointer arrives.

Using Inlaid edge button

A button built like an inlaid plate: a lit-to-dim rim, a recessed panel sunk inside it, and a label that brightens when the pointer arrives.

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, rimWidth, radius, labelGlow

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

2587Keycap plate buttonButtonsA square plate framing a rounded key that travels down on a press and stays depressed while the button is held, by pointer or keyboard.

2659Contrast Boost Frame ButtonButtonsA pale inner plate floats inside a thick painted frame, and hovering cranks the whole thing brighter and more saturated without moving anything.

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.

1863Grained rim buttonButtonsA dark machined button with a brushed metal rim, a faintly grainy face and a hollow play mark that deepens on hover and focus.

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.

2529Nested bezel send buttonButtonsThree nested frames make one chunky physical button: an outer bezel, a shaded well and an inner capsule whose glyph spins a full turn plus a quarter on hover.