IconButton

const IconButton: NamedExoticComponent<{ about?: string; accessKey?: string; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "inline" | "both" | "list"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "mixed" | "false" | "true"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "page" | "false" | "true" | "step" | "location" | "date" | "time"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "link" | "none" | "copy" | "move" | "execute" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "assertive" | "polite"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "mixed" | "false" | "true"; aria-readonly?: Booleanish; aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; autoCapitalize?: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children: ReactNode; className?: string; color?: string; content?: string; contentEditable?: "inherit" | Booleanish | "plaintext-only"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: Booleanish; enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send"; exportparts?: string; form?: string; formAction?: string | (formData) => void | Promise<void>; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; loading?: boolean; name?: string; nonce?: string; onAbort?: ReactEventHandler<HTMLButtonElement>; onAbortCapture?: ReactEventHandler<HTMLButtonElement>; onAnimationEnd?: AnimationEventHandler<HTMLButtonElement>; onAnimationEndCapture?: AnimationEventHandler<HTMLButtonElement>; onAnimationIteration?: AnimationEventHandler<HTMLButtonElement>; onAnimationIterationCapture?: AnimationEventHandler<HTMLButtonElement>; onAnimationStart?: AnimationEventHandler<HTMLButtonElement>; onAnimationStartCapture?: AnimationEventHandler<HTMLButtonElement>; onAuxClick?: MouseEventHandler<HTMLButtonElement>; onAuxClickCapture?: MouseEventHandler<HTMLButtonElement>; onBeforeInput?: InputEventHandler<HTMLButtonElement>; onBeforeInputCapture?: InputEventHandler<HTMLButtonElement>; onBeforeToggle?: ToggleEventHandler<HTMLButtonElement>; onBlur?: FocusEventHandler<HTMLButtonElement>; onBlurCapture?: FocusEventHandler<HTMLButtonElement>; onCanPlay?: ReactEventHandler<HTMLButtonElement>; onCanPlayCapture?: ReactEventHandler<HTMLButtonElement>; onCanPlayThrough?: ReactEventHandler<HTMLButtonElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLButtonElement>; onChange?: ChangeEventHandler<HTMLButtonElement, Element>; onChangeCapture?: ChangeEventHandler<HTMLButtonElement, Element>; onClick?: (event) => void; onClickCapture?: MouseEventHandler<HTMLButtonElement>; onCompositionEnd?: CompositionEventHandler<HTMLButtonElement>; onCompositionEndCapture?: CompositionEventHandler<HTMLButtonElement>; onCompositionStart?: CompositionEventHandler<HTMLButtonElement>; onCompositionStartCapture?: CompositionEventHandler<HTMLButtonElement>; onCompositionUpdate?: CompositionEventHandler<HTMLButtonElement>; onCompositionUpdateCapture?: CompositionEventHandler<HTMLButtonElement>; onContextMenu?: MouseEventHandler<HTMLButtonElement>; onContextMenuCapture?: MouseEventHandler<HTMLButtonElement>; onCopy?: ClipboardEventHandler<HTMLButtonElement>; onCopyCapture?: ClipboardEventHandler<HTMLButtonElement>; onCut?: ClipboardEventHandler<HTMLButtonElement>; onCutCapture?: ClipboardEventHandler<HTMLButtonElement>; onDoubleClick?: MouseEventHandler<HTMLButtonElement>; onDoubleClickCapture?: MouseEventHandler<HTMLButtonElement>; onDrag?: DragEventHandler<HTMLButtonElement>; onDragCapture?: DragEventHandler<HTMLButtonElement>; onDragEnd?: DragEventHandler<HTMLButtonElement>; onDragEndCapture?: DragEventHandler<HTMLButtonElement>; onDragEnter?: DragEventHandler<HTMLButtonElement>; onDragEnterCapture?: DragEventHandler<HTMLButtonElement>; onDragExit?: DragEventHandler<HTMLButtonElement>; onDragExitCapture?: DragEventHandler<HTMLButtonElement>; onDragLeave?: DragEventHandler<HTMLButtonElement>; onDragLeaveCapture?: DragEventHandler<HTMLButtonElement>; onDragOver?: DragEventHandler<HTMLButtonElement>; onDragOverCapture?: DragEventHandler<HTMLButtonElement>; onDragStart?: DragEventHandler<HTMLButtonElement>; onDragStartCapture?: DragEventHandler<HTMLButtonElement>; onDrop?: DragEventHandler<HTMLButtonElement>; onDropCapture?: DragEventHandler<HTMLButtonElement>; onDurationChange?: ReactEventHandler<HTMLButtonElement>; onDurationChangeCapture?: ReactEventHandler<HTMLButtonElement>; onEmptied?: ReactEventHandler<HTMLButtonElement>; onEmptiedCapture?: ReactEventHandler<HTMLButtonElement>; onEncrypted?: ReactEventHandler<HTMLButtonElement>; onEncryptedCapture?: ReactEventHandler<HTMLButtonElement>; onEnded?: ReactEventHandler<HTMLButtonElement>; onEndedCapture?: ReactEventHandler<HTMLButtonElement>; onError?: ReactEventHandler<HTMLButtonElement>; onErrorCapture?: ReactEventHandler<HTMLButtonElement>; onFocus?: FocusEventHandler<HTMLButtonElement>; onFocusCapture?: FocusEventHandler<HTMLButtonElement>; onGotPointerCapture?: PointerEventHandler<HTMLButtonElement>; onGotPointerCaptureCapture?: PointerEventHandler<HTMLButtonElement>; onInput?: InputEventHandler<HTMLButtonElement>; onInputCapture?: InputEventHandler<HTMLButtonElement>; onInvalid?: ReactEventHandler<HTMLButtonElement>; onInvalidCapture?: ReactEventHandler<HTMLButtonElement>; onKeyDown?: KeyboardEventHandler<HTMLButtonElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLButtonElement>; onKeyPress?: KeyboardEventHandler<HTMLButtonElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLButtonElement>; onKeyUp?: KeyboardEventHandler<HTMLButtonElement>; onKeyUpCapture?: KeyboardEventHandler<HTMLButtonElement>; onLoad?: ReactEventHandler<HTMLButtonElement>; onLoadCapture?: ReactEventHandler<HTMLButtonElement>; onLoadedData?: ReactEventHandler<HTMLButtonElement>; onLoadedDataCapture?: ReactEventHandler<HTMLButtonElement>; onLoadedMetadata?: ReactEventHandler<HTMLButtonElement>; onLoadedMetadataCapture?: ReactEventHandler<HTMLButtonElement>; onLoadStart?: ReactEventHandler<HTMLButtonElement>; onLoadStartCapture?: ReactEventHandler<HTMLButtonElement>; onLostPointerCapture?: PointerEventHandler<HTMLButtonElement>; onLostPointerCaptureCapture?: PointerEventHandler<HTMLButtonElement>; onMouseDown?: MouseEventHandler<HTMLButtonElement>; onMouseDownCapture?: MouseEventHandler<HTMLButtonElement>; onMouseEnter?: MouseEventHandler<HTMLButtonElement>; onMouseLeave?: MouseEventHandler<HTMLButtonElement>; onMouseMove?: MouseEventHandler<HTMLButtonElement>; onMouseMoveCapture?: MouseEventHandler<HTMLButtonElement>; onMouseOut?: MouseEventHandler<HTMLButtonElement>; onMouseOutCapture?: MouseEventHandler<HTMLButtonElement>; onMouseOver?: MouseEventHandler<HTMLButtonElement>; onMouseOverCapture?: MouseEventHandler<HTMLButtonElement>; onMouseUp?: MouseEventHandler<HTMLButtonElement>; onMouseUpCapture?: MouseEventHandler<HTMLButtonElement>; onPaste?: ClipboardEventHandler<HTMLButtonElement>; onPasteCapture?: ClipboardEventHandler<HTMLButtonElement>; onPause?: ReactEventHandler<HTMLButtonElement>; onPauseCapture?: ReactEventHandler<HTMLButtonElement>; onPlay?: ReactEventHandler<HTMLButtonElement>; onPlayCapture?: ReactEventHandler<HTMLButtonElement>; onPlaying?: ReactEventHandler<HTMLButtonElement>; onPlayingCapture?: ReactEventHandler<HTMLButtonElement>; onPointerCancel?: PointerEventHandler<HTMLButtonElement>; onPointerCancelCapture?: PointerEventHandler<HTMLButtonElement>; onPointerDown?: PointerEventHandler<HTMLButtonElement>; onPointerDownCapture?: PointerEventHandler<HTMLButtonElement>; onPointerEnter?: PointerEventHandler<HTMLButtonElement>; onPointerLeave?: PointerEventHandler<HTMLButtonElement>; onPointerMove?: PointerEventHandler<HTMLButtonElement>; onPointerMoveCapture?: PointerEventHandler<HTMLButtonElement>; onPointerOut?: PointerEventHandler<HTMLButtonElement>; onPointerOutCapture?: PointerEventHandler<HTMLButtonElement>; onPointerOver?: PointerEventHandler<HTMLButtonElement>; onPointerOverCapture?: PointerEventHandler<HTMLButtonElement>; onPointerUp?: PointerEventHandler<HTMLButtonElement>; onPointerUpCapture?: PointerEventHandler<HTMLButtonElement>; onProgress?: ReactEventHandler<HTMLButtonElement>; onProgressCapture?: ReactEventHandler<HTMLButtonElement>; onRateChange?: ReactEventHandler<HTMLButtonElement>; onRateChangeCapture?: ReactEventHandler<HTMLButtonElement>; onReset?: ReactEventHandler<HTMLButtonElement>; onResetCapture?: ReactEventHandler<HTMLButtonElement>; onScroll?: UIEventHandler<HTMLButtonElement>; onScrollCapture?: UIEventHandler<HTMLButtonElement>; onScrollEnd?: UIEventHandler<HTMLButtonElement>; onScrollEndCapture?: UIEventHandler<HTMLButtonElement>; onSeeked?: ReactEventHandler<HTMLButtonElement>; onSeekedCapture?: ReactEventHandler<HTMLButtonElement>; onSeeking?: ReactEventHandler<HTMLButtonElement>; onSeekingCapture?: ReactEventHandler<HTMLButtonElement>; onSelect?: ReactEventHandler<HTMLButtonElement>; onSelectCapture?: ReactEventHandler<HTMLButtonElement>; onStalled?: ReactEventHandler<HTMLButtonElement>; onStalledCapture?: ReactEventHandler<HTMLButtonElement>; onSubmit?: SubmitEventHandler<HTMLButtonElement>; onSubmitCapture?: SubmitEventHandler<HTMLButtonElement>; onSuspend?: ReactEventHandler<HTMLButtonElement>; onSuspendCapture?: ReactEventHandler<HTMLButtonElement>; onTimeUpdate?: ReactEventHandler<HTMLButtonElement>; onTimeUpdateCapture?: ReactEventHandler<HTMLButtonElement>; onToggle?: ToggleEventHandler<HTMLButtonElement>; onTouchCancel?: TouchEventHandler<HTMLButtonElement>; onTouchCancelCapture?: TouchEventHandler<HTMLButtonElement>; onTouchEnd?: TouchEventHandler<HTMLButtonElement>; onTouchEndCapture?: TouchEventHandler<HTMLButtonElement>; onTouchMove?: TouchEventHandler<HTMLButtonElement>; onTouchMoveCapture?: TouchEventHandler<HTMLButtonElement>; onTouchStart?: TouchEventHandler<HTMLButtonElement>; onTouchStartCapture?: TouchEventHandler<HTMLButtonElement>; onTransitionCancel?: TransitionEventHandler<HTMLButtonElement>; onTransitionCancelCapture?: TransitionEventHandler<HTMLButtonElement>; onTransitionEnd?: TransitionEventHandler<HTMLButtonElement>; onTransitionEndCapture?: TransitionEventHandler<HTMLButtonElement>; onTransitionRun?: TransitionEventHandler<HTMLButtonElement>; onTransitionRunCapture?: TransitionEventHandler<HTMLButtonElement>; onTransitionStart?: TransitionEventHandler<HTMLButtonElement>; onTransitionStartCapture?: TransitionEventHandler<HTMLButtonElement>; onVolumeChange?: ReactEventHandler<HTMLButtonElement>; onVolumeChangeCapture?: ReactEventHandler<HTMLButtonElement>; onWaiting?: ReactEventHandler<HTMLButtonElement>; onWaitingCapture?: ReactEventHandler<HTMLButtonElement>; onWheel?: WheelEventHandler<HTMLButtonElement>; onWheelCapture?: WheelEventHandler<HTMLButtonElement>; part?: string; popover?: "" | "auto" | "manual" | "hint"; popoverTarget?: string; popoverTargetAction?: "hide" | "show" | "toggle"; prefix?: string; pressed?: boolean; property?: string; radioGroup?: string; radius?: IconButtonRadius; ref?: Ref<HTMLButtonElement>; rel?: string; resource?: string; results?: number; rev?: string; role?: AriaRole; security?: string; size?: Size; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; testId?: string; title?: string; translate?: "yes" | "no"; type?: "button" | "reset" | "submit"; typeof?: string; unselectable?: "off" | "on"; value?: string | number | readonly string[]; variant?: Variant; vocab?: string; }>

Defined in: src/components/primitives/IconButton/IconButton.tsx:160

A specialized square button component for displaying icons in editor interfaces.

Designed for toolbar actions, quick controls, and icon-based interactions. Always square and sized appropriately for the contained icon. Supports various border radius options from sharp corners to fully circular.

Example

// Basic ghost button (default)
<IconButton aria-label="Save file">
  <SaveIcon />
</IconButton>

// Circular filled button
<IconButton
  variant="filled"
  radius="full"
  size="lg"
  aria-label="Add item"
>
  <AddIcon />
</IconButton>

// Sharp corners for toolbar
<IconButton
  variant="default"
  radius="none"
  aria-label="Settings"
>
  <SettingsIcon />
</IconButton>

// Toggle state
<IconButton
  pressed={isVisible}
  radius="sm"
  aria-label="Toggle visibility"
  onClick={toggleVisibility}
>
  <EyeIcon />
</IconButton>