ActionIconButton

ActionIconButton is a square icon-only button with the same API call capabilities as ActionButton. It renders a single icon inside a fixed-size container and shows a spinner while a request is in progress. Use it when you need a compact action trigger — such as a delete or download icon — that can optionally make an HTTP request directly.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onClick | () => void | Yes | — | Callback fired when the button is pressed. | | color | string | No | "primary" | Theme color key or any CSS hex/named color. | | borderRadius | number | No | 22 | Border radius in pixels. Use 99 for a fully round button. | | type | "clear" \| "outline" \| "solid" | No | "solid" | Visual variant of the button. | | disabled | boolean | No | false | Disables interaction and reduces opacity. | | icon | string | No | — | Icon identifier to display 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. | | hasShadow | boolean | No | true | Whether to apply a drop shadow. | | containerStyle | React.CSSProperties | No | — | Inline styles applied to the outer wrapper div. | | buttonStyle | React.CSSProperties | No | — | Inline styles applied to the inner Touchable element. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls the button dimensions and icon size. | | apiBaseUrl | string | No | — | Base URL for the HTTP request. Overrides the default client base URL. | | path | string | No | — | API endpoint path. When provided, a request is made on click. | | useAuthToken | boolean | No | — | When true, uses the authenticated HTTP client (includes Bearer token). | | method | "GET" \| "POST" \| "PUT" \| "DELETE" | No | "POST" | HTTP method for the request. | | data | Record<string, any> | No | — | Request body payload sent with the HTTP request. | | spinnerColor | string | No | — | Color of the loading spinner. | | onSuccess | (response: any) => void | No | — | Callback fired when the HTTP request succeeds. | | onError | (error: any) => void | No | — | Callback fired when the HTTP request fails. | | isExport | boolean | No | false | When true and method is "GET", uses getBlob() to download binary data. |

Usage

Basic

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

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

Remote delete with auth token

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

export default function Example({ itemId }: { itemId: string }) {
  return (
    <ActionIconButton
      icon="trash"
      color="danger"
      type="outline"
      size="sm"
      onClick={() => {}}
      path={`/v1/items/${itemId}`}
      method="DELETE"
      useAuthToken
      onSuccess={() => console.log('Item deleted')}
      onError={(err) => console.error(err)}
    />
  );
}

Export file download

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

export default function Example() {
  return (
    <ActionIconButton
      icon="download"
      onClick={() => {}}
      path="/v1/reports/export"
      method="GET"
      useAuthToken
      isExport
      onSuccess={(blob) => {
        const url = URL.createObjectURL(blob);
        window.open(url);
      }}
    />
  );
}