IconButton

IconButton renders a square button containing a single icon. It supports theme colors, three visual variants (solid, outline, clear), five size presets, and subtle press feedback. It is the building block for many other components in the library — CartButton, ActionsMenuButton, and LockToggleButton all use it internally.

Use IconButton for toolbar actions, table row controls, and any place where a labelled button is too wide.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onClick | (e: React.MouseEvent<any>) => void | Yes | — | Callback fired when the button is pressed. Receives the mouse event. | | icon | string | No | — | Icon identifier displayed inside the button. | | iconPaths | any[] | No | — | SVG path data for a custom icon (alternative to icon). | | iconSize | number | No | — | Override the icon size in pixels. | | color | string | No | "primary" | Theme color key or any CSS hex/named color. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | borderRadius | number | No | 22 | Border radius in pixels. Default produces a circular button. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | hasShadow | boolean | No | true | Whether to apply a drop shadow. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls the button's width, height, and icon size. | | style | React.CSSProperties | No | — | Inline styles applied to the button element. |

Usage

Basic

import IconButton from '@/components/buttons/IconButton';

export default function Example() {
  return (
    <IconButton
      icon="edit"
      onClick={() => console.log('edit')}
    />
  );
}

Outline danger button

import IconButton from '@/components/buttons/IconButton';

export default function Example() {
  return (
    <IconButton
      icon="trash"
      type="outline"
      color="danger"
      size="sm"
      onClick={() => console.log('delete')}
    />
  );
}

Clear style for toolbars

import IconButton from '@/components/buttons/IconButton';

export default function Toolbar() {
  return (
    <div style={{ display: 'flex', gap: 4 }}>
      <IconButton icon="bold" type="clear" hasShadow={false} onClick={() => {}} />
      <IconButton icon="italic" type="clear" hasShadow={false} onClick={() => {}} />
      <IconButton icon="underline" type="clear" hasShadow={false} onClick={() => {}} />
    </div>
  );
}