Icon button

A symbol you press: back, forward, search, more. It is 36 pixels square for the pointer and has no box until you point at it.

Part of a Music window whose header has the back and forward arrows, the title Music, Albums, and on the right a search button under the pointer and a more button, above a short list of songs.

Use an icon button for an action whose symbol people already know, in a header, a rail or a transport. For an action that needs words, use a Slab or actions as words.

Anatomy

A page header at 1.6 times its size with the back arrow, the disabled forward arrow, the title, a search button under the pointer and a more button, with numbered callouts.
A header's buttons at 1.6 times their size.
  1. SymbolA Tacit symbol, 20 pixels (22 for back and forward), in the secondary ink and the main ink under the pointer.
  2. WashA circle of the main ink, 8 % under the pointer and 22 % while pressed. It is not there at rest.
  3. DisabledThe symbol in the faint ink, out of the Tab order. It takes no wash and sends nothing.

The button also has a label, which a screen reader says. It is required: the symbol says nothing to a screen reader. A button whose symbol is not plain can also have a tip, a tooltip with its name.

States

One icon button in five columns: at rest, under the pointer, pressed, with the keyboard focus ring, and disabled.
The same button in each state.
  1. RestThe symbol alone.
  2. Pointer over itA round wash of 8 %, in and out over 80 ms. 8 % because the 5 % of other parts does not show on a target this small.
  3. PressedThe pressed wash, 22 %.
  4. Keyboard focusThe focus ring, round, around the circle. See States.
  5. DisabledThe symbol in the faint ink, no wash.

A button that is a switch (checkable, with checked when it is on) keeps the current wash and draws its symbol in the accent while it is on. A screen reader hears it as a toggle.

Sizes

A 36-pixel button with a 20-pixel symbol and 8 pixels each side, and a 51-pixel button with a 32-pixel symbol and 9.5 pixels each side, both at 3 times their size.
A button for a row's symbol and one for a larger symbol, at 3 times their size.
PartValue
BoxThe symbol's size times 1.6, rounded, and never under #36
Symbol20 pixels (icon.row) by default; 22 for back and forward (icon.nav); 17 in the rail (icon.rail)
WashA circle, the whole box
Focus ring2 pixels, 2 outside the circle

A larger symbol keeps the same room around it: the transport's symbols grow the box, not the space.

Keys and pointer

Do thisTo
TabMove the focus to the button
Enter or SpacePress it
ClickPress it
Pointer over itShow the wash; the pointer is a hand

Accessibility

Writing

The label names the action, not the picture: "Search", not "Magnifier"; "Fold the places", not "Panel". Keep it to one or two words.

Do and don't

A row of five icon buttons with the symbols for back, forward, search, close and more.
DoUse symbols people already know.
A row of five icon buttons with symbols that have no common meaning.
Don'tUse a symbol you have to learn. If it needs a word, write the word.

Code

import Tacit.Kit

PageHeader {
    crumbs: ["Music"]; here: "Albums"
    IconButton {
        anchors.verticalCenter: parent.verticalCenter
        symbol: "search"
        label: "Search"
        onActivated: search.open()
    }
}
PropertyWhat it does
symbolA Tacit symbol's name
labelWhat a screen reader says. Required
sizeThe symbol's size; the box is 1.6 times it, at least 36. Default 20
tipA name shown in a tooltip under the pointer and with the keyboard
checked, checkableA toggle that is on; a toggle sets checkable as well, so it is heard as one while it is off
enabledFalse: the faint ink, no wash, out of the Tab order
activated()Sent by a click, Enter or Space

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.