Icon button

UsageCopy Anchor Link

import { IconButton } from '@commenda/pathfinder/icon-button';
import { Trash01Icon } from '@commenda/pathfinder/icons/Trash01Icon';

<IconButton
  label="Delete entity"
  destructive
  disabled={!canDelete}
  disabledReason="Only administrators can delete entities"
  onClick={onDelete}
>
  <Trash01Icon />
</IconButton>;

InstallationCopy Anchor Link

pnpm --filter your-app add "@commenda/pathfinder@workspace:*"

The package currently lives in the Commenda workspace. External installation requires a published version or packed tarball. Import the precompiled stylesheet once; no application Tailwind setup is required.

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

Primary, Secondary, Tertiary and Plain. Hover or focus each example to inspect its interactive states and tooltip.

SizesCopy Anchor Link

Destructive variantsCopy Anchor Link

Primary, Secondary and Tertiary support destructive actions. Plain intentionally does not.

Disabled with a reasonCopy Anchor Link

All four variants support disabled actions. Focus or hover to read the reason; activation remains blocked.

API referenceCopy Anchor Link

ICON-BUTTON-A11Y-01: Name the action and target, not the glyph. “More options for Meridian UK Ltd” is useful; “Dots” is not. A disabled reason supplements this name. Tooltips work on focus and hover. With a reason, the disabled control remains focusable but cannot activate. aria-pressed is available for toggle actions.

Use tertiary for repeated row actions, secondary when an edge is needed and primary for the single main icon action such as Send. Plain has no hover background. xs is for input clear/chip close controls; never nest a button inside another button. Use a labeled Button when the icon is unfamiliar. Icons use 16px optical artwork through md and 20px at lg. Visual square size alone does not guarantee an adequate touch target; allocate sufficient spacing/hit area in touch layouts.

Import @commenda/pathfinder/styles.css once at the app root. Event handlers require a client component in Next.js App Router.

Set tooltip={false} when an explicit Tooltip wraps the control, so it receives one hint. The accessible label remains required.

Design rulesCopy Anchor Link

Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.

Action rulesCopy Anchor Link

• CONTROL-SIZE-01 — Figma: Button and SplitButton sm/md/lg have 28/32/36px visual heights; md default. IconButton adds xs 24. Button icons are 16 through md and 20 at lg; pass size to generated icons to select optical artwork. Link styles have text-sized geometry. Long content can increase minimum height for accessibility.

• CONTROL-FOCUS-01 — Figma: show focus from keyboard, not pointer click. Button family uses a blue ring separated by a white gap. Open triggers retain hover styling. Disabled reason is a Pathfinder extension: retain action name, expose description, and allow focus without activation where the native wrapper supports it.

• ICON-BUTTON-A11Y-01 — Figma: labels are required and repeated in tooltips. Name action/target, never the glyph. Use familiar icons; otherwise use a text Button. Primary is reserved for the single main icon action. xs is reserved for controls inside a field/chip visually, never nested interactive markup. Touch layouts need adequate target space; 32/36px visual bounds do not themselves provide 44px targets.