Controlsregistry/ui/button.tsx/r/button.json

Button

Ink-framed action button with immediate offset shadow on hover and primary, secondary, and marker-yellow variants.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Status: Ready

Dark · Flashback.f12-theme-dark

Interactive preview

Status: Ready

Install & copy-in source

shadcn CLI (button.json)

npx shadcn@latest add https://frame12.dev/r/button.json

Usage example (Button)

import { Button } from '@/components/frame12';

export function ActionRow() {
  return (
    <div className="f12-row-pair">
      <Button variant="primary">Deploy Rules</Button>
      <Button variant="marker">Run Replay</Button>
      <Button variant="secondary">Export CSV</Button>
    </div>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Forwards ref to a native <button type="button"> with 3px solid --f-ink focus-visible outline.
Marker variant pairs --f-marker background with --f-marker-ink text for 14.8:1 contrast.

GrammarFRAME/12 rules

Design grammar

Hover state applies a hard 3px 3px 0 var(--f-rule) offset shadow immediately (0ms latency).
Disabled buttons switch to a dashed ink border with --f-ink-2 text.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/button.tsx)
Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'marker'`	`'secondary'`	Visual style: inverted ink (primary), paper surface (secondary), or marker yellow (marker).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding and monospace font scale.