Components

Icon Button

Square, icon-only button for toolbars, sidebars and row actions, with a required label and an optional tooltip.

Usage

Use it to:

  • compact toolbar and row actions with a well-known icon (more, close, add)

Don’t use it to:

  • actions whose icon is not obvious (use Button with text)
  • the main action of a view (use a primary Button)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/IconButtonExample.tsx
import { IconButton } from '@krackedui/motion';

export function IconButtonDemo() {
  return (
    <IconButton icon="more" label="More actions" tooltip />
  );
}

Examples

Size

Variant

Tone

Icon color: primary for toolbars, secondary / tertiary for quieter row affordances.

Active and tooltip

Disabled

Dark theme

API Reference

IconButton

A <button>; supports all of its props. Adds:

PropTypeDefault
icon
IconName
label
string
size
"xs""sm""md""lg"
"md"
variant
"ghost""secondary"
"ghost"
tone
"primary""secondary""tertiary"
"primary"
active
boolean
false
tooltip
booleanReactNode
false
iconSize
number
type
"button""submit""reset"
"button"
disabled
boolean
false

Accessibility

  • label becomes aria-label, so the button always has a name; the icon is hidden from assistive tech.
  • Tab focuses it; Enter / Space activate it. With tooltip, the hint also shows on keyboard focus.
  • For a toggle, add aria-pressed; for a menu trigger, the Menu adds aria-expanded. active alone is visual.
  • Sizes below 24px grow to 24×24 on touch screens.
© 2026 Motion. Internal documentation.