IconButton

stablev1.0.0·open in canvas

Square icon-only action — `aria-label` is a **required prop**, so an unnamed icon button is a compile error.

Installnpx shadcn add @cids/icon-button

Live demo

Motion · tap to replay

honors reduced-motion

Targeted transition 150ms + press scale, as Button. Reduced-motion via global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { IconButton } from "@/design-system";

<IconButton aria-label="Close" onClick={close}>×</IconButton>
<IconButton aria-label="Settings" variant="secondary" size="lg">⚙</IconButton>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--radius-control

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

defaulthoveractivefocus-visibledisabled.

Square icon-only action — aria-label is a required prop, so an unnamed icon button is a compile error.

Anatomy

┌────┐
│ ✕  │ ← square (28/36/44), icon centered
└────┘

Props

Prop	Type	Default	Notes
`aria-label`	`string`	required	The accessible name — enforced by the type.
`variant`	`ButtonVariant`	`"ghost"`	Same four variants as Button.
`size`	`"sm"`	"md" \	"lg"`	`"md"`	28 / 36 / 44 px square. `sm` only inside dense rows; prefer `lg` (44px target) on primary surfaces.
`className`	`string`	—	cn-merged.
…rest	`ButtonHTMLAttributes`	`type="button"`	Native pass-through.

Motion

Targeted transition 150ms + press scale, as Button. Reduced-motion via global reset.

· The required aria-label prop is the point of the component.
· 44px (lg) meets the DESIGN.md touch-target floor; md (36) relies on surrounding spacing; document dense-row use.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.