Sheet 02.22 / Components · Controls

Button

A square outlined button that inverts to ink on hover. radius-0, 36px tall, line-strong border on surface. One primary per screen at most.

CLASSb-btnDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — buttonlive, from bundle.css

controls

Open the sheet ↗ Read the post

Anatomy

Parts

Part	Class	Notes
Button	`.b-btn`	Outlined; hover is ink with paper text.
Primary	`.b-btn.ink`	Starts inverted. One per screen.

Markup

Code

bundle.css

<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
  <a class="b-btn" href="#f">Open the sheet ↗</a>
  <a class="b-btn ink" href="#r">Read the post</a>
</div>

Say the action in the label.
Mark links that leave the site with ↗.

Don't

Round the corners.
Put two primaries on one screen.