Buttons

Tinted disc swell button

A dark monospaced key with a bottom vignette; hovering swells a translucent coloured disc from its centre that tints the face without hiding it.

Using Tinted disc swell button

A dark monospaced key with a bottom vignette; hovering swells a translucent coloured disc from its centre that tints the face without hiding 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, discOpacity, swellSeconds, pressScale

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

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.

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

2669Graphite Slab CTAButtonsA fixed-width dark slab button with a subtle graphite ramp that lifts on hover and carries a thin accent rule along its bottom edge.

2635Rim to fill gradient buttonButtonsA dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down.

2569Unfurling chevron ring buttonButtonsA tinted outline button that grows a translucent ring, scales its label up and unrolls a chevron on hover, snapping the ring solid while pressed.

2466Add Then Confirm ChipButtonsA dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added.