iconButton

iconButton(opts): void

Defined in: components/button.ts:203

A bare glyph in a square hit area — no fill, no border, just ink that lifts on hover. For chrome that has to sit beside something more important without competing with it: a ✕ on a box, the ☰ a routed S.main() puts in its top bar, the verbs in a page’s actions.

Reach for button instead whenever the thing has a name worth reading; an icon alone is unambiguous only for a handful of universal actions.

Parameters

opts

IconButtonOptions

Returns

void

Example

import { trash2, share2 } from "staffa/icons";

$panel.actions = () => {
  // A string `tooltip` names the button for screen readers too, so one option does.
  S.iconButton({ icon: share2, tooltip: "Share", click: share });
  // Named, but silent on hover: `ariaLabel` alone raises no tooltip.
  S.iconButton({ icon: trash2, ariaLabel: "Delete", click: del, attrs: "fg:$s-danger" });
};