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. The arrow travels along its axis while color floods from the opposite side. Cause and effect cross 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
directionsemantic, not decorativemotion 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
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 ·
Neverbox-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.
§ · particle-buttonBurst on click For conversion confirms only
§ · hold-buttonSustained intent before effect For destructive commits only
§ · social-buttonShare row, expands on hover Published artifacts only
§ · slide-text-buttonVertical text-slide on hover Marketing tiles, not app chrome