IconButton

A 48 × 48 dp icon-only button with a 24 dp stroke icon, used in bars, trays, rows (⋮) and dialog headings (×).

Consumer provides: the icon, a content description that says what it does ("Delete page", "More actions for kubernetes"), the selected/pressed state where it is a tool, and the click handler.

States

• Default: ink icon, no background.
• Selected tool / open trigger: a 36 dp selected-tool-box of sage-selected with a 2 dp forest outline behind a forest icon. Use it for the active pen, the open » tray, a ⋮ whose menu is open, Lock zoom when on.
• Destructive: urgent icon (Delete page) — on both devices.
• Disabled: outline icon, not focusable.

Rules

• Never smaller than 48 dp; icons stay 24 dp.
• Selected tools are exposed as Role.Tab with selected = true; toggles as aria-pressed.
• Don't add text labels under bar icons; the content description carries the name.

Compose

IconButton (48 dp) with a custom indication-free selected background: Box(Modifier.size(36.dp).background(sageSelected, RoundedCornerShape(8.dp)).border(2.dp, forest, RoundedCornerShape(8.dp))).

In the app

MenuBarButton and MenuBarIcon.

• Menu triggers (», ⋮, Pen presets) pass open and are exposed as buttons with an Expanded or Collapsed state.
• There is no outlined icon-button variant.
• The sync status glyphs are described in Sync and account.

Preview