Icon Button

stable

Square icon-only button with a mandatory accessible label and an automatic tooltip (with optional shortcut).

@kura-ui/react/icon-buttonCopy page for agents.md registry.json

minimal

Composer toolbar

full

Message action bar

Copy with a confirm swap, pressed feedback toggles, a loading regenerate and shortcut tooltips under an assistant reply.

composition

The dip lines up with the 2.4 release: onboarding completion fell from 71% to 58% the day the new permissions step shipped. Moving that step after the first project is created should recover most of it.

Sonnet 5.5 · 2.1s

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/icon-button.json

Copies the source into components/kura/icon-button with its dependencies (kura-theme, button, kura-keys, tooltip, utils). Tokens come from the kura-theme item.

When to use it

Use it for

Toolbar and composer actions: attach, mic, send, stop, copy, retry.
Any action represented only by an icon.

Reach for something else when

Actions that need a visible text label — use button.
Toggles with on/off state in a group — compose button with aria-pressed.

Props

Prop	Type	Default	Description
label*	string	—	Accessible name and tooltip text.
icon*	React.ReactNode	—	The icon element, e.g. <ArrowUp /> from lucide-react.
tooltip	boolean	true	Show label (and shortcut) in a tooltip.
shortcut	readonly KeyName[]	—	Shortcut shown in the tooltip (display only).
tooltipSide	"top" \| "right" \| "bottom" \| "left"	"top"	Tooltip side.
variant	"primary" \| "secondary" \| "ghost" \| "outline" \| "accent" \| "danger"	"ghost"	Same variants as button; defaults to ghost.
size	"xs" \| "sm" \| "md" \| "lg"	"md"	24 / 28 / 32 / 40px square.

All native attributes of the root element, className and ref pass through.

Accessibility

`label` becomes aria-label, so the control always has an accessible name.
The tooltip opens on focus, so keyboard users see the label and shortcut too.
Reduced motion: Inherits button: no press scale; tooltip fades without travel.

Keys	Action
Enter / Space	Activate

Notes for agents

Never pass aria-label; use `label`. The shortcut is display-only — bind it with useHotkey or kbd-shortcut.

Basic