Buttons

Inset sheen button

A pale utility button with a hairline border, a one pixel highlight along its top edge and a pressed state that flips the sheen inward.

Using Inset sheen button

A pale utility button with a hairline border, a one pixel highlight along its top edge and a pressed state that flips the sheen inward.

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, radius, disabled

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

2627Hairline utility buttonButtonsA quiet neutral action button that answers hover with a one pixel lift, a darker hairline and a soft shadow, then sinks flat again when pressed.

1647Pressed highlight toggleButtonsA two state icon button that keeps its pressed state visible with a rounded highlight block growing behind the glyph from the centre out.

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.

2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.

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

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.