Icon Button

A square secondary icon-only button - medium 36px (20px icon) and small 32px (16px icon), both radius 10. Used for row actions, header bells, and toolbar controls.

Installation

You can add this icon button component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add icon-button

Sizes & states

Pass any Remix Icon component reference via icon, pick a size, and always provide an aria-label- there's no visible text.

<IconButton icon={RiEditLine} size="medium" aria-label="Edit" /> {/* 36px, 20px icon */}<IconButton icon={RiEditLine} size="small" aria-label="Edit" />  {/* 32px, 16px icon */}
{/* Disabled */}<IconButton icon={RiEditLine} aria-label="Edit" disabled />