IconButton

Example#

Usage#

Use an icon button where a glyph alone is understood by everyone: close, search, menu, play, previous and next. It has the Button's faces and travel, in a square key.

• The name is required. label is the accessible name and the tooltip text, so the action is never a mystery on hover or to a screen reader.
• Variants. secondary (default), primary for the firm choice and quiet beside other keys, such as a dialog's close key. There is no action variant: the main action always has words.
• Toggles and counts. pressed makes a toggle key (aria-pressed); count prints a Count at the top-end corner and adds it to the name, such as "Inbox, 3 waiting".
• Sizes. sm 40, md 44 (default), lg 52 px squares, with 18, 20 and 24 px glyphs from the shape alphabet. On touch screens no key is under 44 px and the tooltip is off; the name is still announced.

Anatomy#

Volume#

Reading layer: the key prints the same at every volume, like the Button it is cut from.

• Quiet

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

• Studio

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

• Press

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

• Rave

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

Content#

• The label names the action, not the picture: "Close the menu", "Search the docs", never "X" or "Magnifier".
• Sentence case, a verb first, four words at most, because it is also the tooltip.
• Use the same glyph for the same action everywhere; a glyph never stands for two things on one site.

Do and don't#

Accessibility#

• label is the accessible name and the tooltip's words, so the tooltip never holds the only copy.
• The tooltip opens on hover after 400 ms and on keyboard focus, closes on Escape, and never opens from a touch.
• Squares are 40, 44 and 52 px, and at least 44 px on touch screens.

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

Props#

Tokens#

Changelog#