Button

Example#

Usage#

Use a button for an action that happens on this page: send a form, open a dialog, start something. Going to another page is a link; use href on a button only when the destination is the page's main action, such as "Get a quote".

• One action key per view. action prints in the yellow key ink, the only yellow on the page (D-C1). Everything else is secondary (the default), primary for a firm second choice, quiet beside a stronger key, or link for an action that reads as text.
• Line keys. variant="line" with line fills the face with a line's plate, for actions that belong to one line of work, such as "See the websites".
• Destructive actions use primary with a glyph and an explicit verb ("Delete the draft"). There is no red button: every Process ink already means a line of work (D-C2).
• Pending and toggles. loading keeps the key focusable, blocks a second submit and draws a bar under the label. pressed makes a toggle key that holds at half travel.
• Sizes. sm 40 px, md 48 px (default), lg 56 px; on touch screens nothing goes under 44 px. block="phone" stretches the key below the md width.

Anatomy#

Volume#

The key is reading layer, so it prints the same at every volume and in every comic register (D-B2, D-N9): the face, the rule and the offset never change. The art around it is what gets louder.

• Quiet

  Get a quoteRead the case studyBook a callMaybe laterSee every project

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Get a quoteRead the case studyBook a callMaybe laterSee every project

  The site default. Art on its own plates, one display moment per view.

• Press

  Get a quoteRead the case studyBook a callMaybe laterSee every project

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Get a quoteRead the case studyBook a callMaybe laterSee every project

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Start with a verb and say what happens: "Send", "Get a quote", "Email it instead". The joke goes next to the key, never on it (D-I2).
• Sentence case, one to four words. Labels never wrap mid-word; a full-width key balances its lines.
• The same action keeps the same label everywhere it appears, so "Get a quote" is never also "Request pricing".
• No "Click here", "Submit" or "OK": a reader who lands on the key alone should know what it does.

Do and don't#

Accessibility#

• A native button (type="button" by default) or, with href, a link; labels are literal verbs.
• Pending (loading) keeps the key focusable with aria-busy and aria-disabled, blocks a second submit and draws a bar under the label; under reduced motion the bar becomes a static ellipsis.
• A toggle key (pressed) exposes aria-pressed and sits at half travel, so its state does not depend on colour.
• Keys are 40, 48 and 56 px tall and never under 44 px on touch screens; the focus ring is 2 px in --mk-focus with a 2 px gap.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#