Actions

Button

The workhorse CTA — squared, uppercase, hairline-bordered, inverting its fill on hover with a one-pixel lift. Supersedes the raw .dark-form-button recipe in app code.

variant

"solid" | "ghost" | "light"

Default "solid" (ink fill → paper on hover). "ghost" is the hairline secondary; "light" is for dark sections.

size

"md" | "sm"

Default "md" (39px tall).

href

string?

Renders an <a> instead of a <button>; anchor-only and button-only props typecheck per branch.

…rest

native props

Spread onto the element. type defaults to "button".

Roll button

Two stacked labels in a vertical clip: hover or the controlled active state rolls one out and its twin in — enter 300ms on the entry curve, leave 250ms, always faster out.

label

string

The resting label.

secondLabel

string?

Text of the incoming twin; defaults to label for a self-swap.

active

boolean?

Controlled swap for toggle use. Pass aria-expanded / aria-pressed at the call site.

href

string?

Renders an <a> instead of a <button>.

Bracket button

The terminal-register control: static mono brackets park around a label that rolls through its clip. Same roll rig and toggle contract as the roll button.

label

string

The resting label. Brackets are aria-hidden decoration.

secondLabel

string?

Incoming twin for toggle use; defaults to label.

active

boolean?

Controlled swap; add the matching aria attribute yourself.

href

string?

Renders an <a> instead of a <button>.

Dot link

Nav-grade link with a square dot parked outside its clip; hover slides the row in while the dot fades up — 400ms in, 250ms out. Reduced motion pins the settled, dot-visible state.

href

string

Always an anchor.

label

string

Uppercase micro label rendered next to the dot.

…rest

anchor props

Spread onto the <a>.

Tag

Uppercase micro label in the mono voice. Three squared variants — rounded chip fills are deliberately unsupported.

variant

"plain" | "hairline" | "bracket"

Default "plain". "hairline" draws a 1px border-current box; "bracket" wraps the label in [ ].

children

ReactNode

The label content.

Skip link

Accessibility furniture: parked above the viewport until keyboard focus lands, then instantly visible in primary-button styling. One is mounted on this page — press Tab from the top to see it.

Render it as the first child of the page and give the target region the matching id (default #main). It has no transition on purpose — it must be fully visible the instant focus arrives.

href

string = "#main"

Anchor of the region focus should jump to.

children

ReactNode?

Label; defaults to "Skip to content".

CSS link recipes

Two class-only link behaviors predate the component kit and remain the right tool for plain markup.