Button

CSS

Hard offset shadow that collapses on press, with the button moving into its shadow.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/button.json

No motion engine needed.

Usage

import { Button, buttonClass } from "@/components/spotcheck/button"

<Button variant="ink">Deploy</Button>
<Button variant="accent">Run eval</Button>
<Button>Export CSV</Button>
<Button variant="ghost">Cancel</Button>

<Link href="/runs" className={buttonClass("ink")}>View runs</Link>

Use buttonClass to style a link as a button, so it stays a real link.

Props

variant"outline" | "ink" | "accent" | "ghost"Default outline

Keyboard

Enter	Press the button
Space	Press the button

Reduced motion

The button moves into its shadow at once, with no transition.