Buttons · Subconscious

Buttons primary · ghost · icon/tool · direction follows action

Buttons that decide.

If causality is the product, then a button's arrow is semantic. Direction is not decoration. Down means download. Left means back. Up-and-right means ship. The control itself stays still — no lift, no scale — but the arrow travels along its axis and the color floods from the opposite side. Cause and effect, crossing in the middle.

Editor's noteNº 07 · b · programmatic

Four register modifiers, loud to quiet; pick at most one. primary (ink fill, ivory text, the one verb on a page), ghost (no fill, no border, for tertiary actions in a dense surface), danger (filled signal-red, the only red-CTA license, for destructive confirms), and quiet (muted grey-tint tertiary). With no register the engine is its default bordered ivory control. Geometry modifiers compose on top: pill (mono-caps in-app chip), lead-arrow (back/return), and small. The control itself never lifts or scales. Color inverts; the sweep slab and arrow do the work.

nw · revert · undo

n · publish · ship

ne · upgrade · convert

w · back · previous

direction semantic, not decorative motion is not the primitive

e · next · continue

sw · archive · retire

s · download · export

se · demote · defer

01 · PrimaryThe default
direction: NE

Vector (+1, −1) · ↗
Arrow exits up-and-right
Sweep floods in from down-and-left

02 · SecondaryA path for the
curious reader

Rest ink outline · ivory fill
Hover color inversion only
Use secondary to every primary

02b · GhostNo border, no fill
tertiary inside a dense surface

Rest transparent · no border
Hover sweep fills with ink
Use for tertiary actions in toolbars, modals, dense forms

03 · BackReverse direction
arrow leads the label

Vector (−1, 0) · ←
Arrow leaves left
Sweep floods in from right

04 · DownloadData coming
off the page

Vector (0, +1) · ↓
Arrow falls
Sweep floods upward from bottom

05 · Editorial linkInline, inside prose
or after a quote

See the W&B benchmark ↗

Rest 1px solid underline
Hover flips to signal red without motion
Never the default browser blue

06 · Product chipUI controls inside
the app only

Radius 2px only, never 999
Type Sohne Mono · 11pt · caps
Scope app chrome only

Set primary · ghost · icon/tool · Arrow direction must match action, but stays still · Hover color inversion only · Back variant .lead-arrow flips order; arrow precedes label · Never box-shadow · gradient · scale(1.02) · arrow direction ≠ action direction

Registry · borrowed shapes install with npx shadcn add · not canonical

A louder verb, when the moment earns it.

The .b[data-dir] engine above is the doctrine. These three are KokonutUI imports — installable from the registry, bridged to the contract, but kept out of the canonical set on purpose. Use them sparingly: a particle burst on a conversion confirm, a share row on a published artifact, a text-slide CTA where the destination is the verb.