Buttons

Graphite Slab CTA

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

Using Graphite Slab CTA

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

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, width, lift, radius, showRule

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

2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.

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.

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.

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.

2711Count Sweep CTAButtonsA compact dark call to action with a leading mark, a divider and a live tally, crossed by a slow diagonal light streak on hover.

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.