Label & icon buttons

Quiet controls inside content. A label button is caps text; an icon button is a glyph with a tooltip.

Stipulations

• A disclosure reads “Details +” closed and “Hide details −” open, with aria-expanded.
• Label buttons turn the accent on hover on white, yellow on black.
• An icon button always has aria-label; data-tip repeats it as the tooltip. The tooltip shows on hover and keyboard focus (phones have no hover, so the icon must be clear on its own).
• The hit area is 44px. To line the glyph up with an edge, pull the button out with negative margin rather than shrinking it.