IconButton

Interactive

See IconButton in Storybook for every variant, with live controls.

A square, icon-only control. Use where a label would be noise — toolbars, table rows, dialog close buttons.

import { IconButton } from "@kairosis/eidos";

<IconButton icon="refresh-cw" label="Re-run" onClick={rerun} />;

Props

Prop	Type	Default	Description
icon	IconName	—	Required. Lucide icon, kebab-case
label	string	—	Required. Accessible name, also the title tooltip
size	"sm" | "md" | "lg"	"md"	Hit target: 28 / 36 / 44px
variant	"ghost" | "secondary"	"ghost"	Transparent, or bordered
active	boolean	false	Toggled state — primary-subtle background

Also accepts every <button> attribute. Forwards a ref.

Guidelines

• label is mandatory because the glyph is aria-hidden. Without it the control is unusable by screen readers.
• The glyph is 14–18px inside a 28–44px target — don't shrink the target to fit the icon.
• active sets aria-pressed, so use it for toggles rather than for "selected" navigation.
• For a richer hover hint than title, wrap in Tooltip.