IconToggleButton

IconToggleButton displays one of two icons depending on a boolean value prop — activeIcon when true, inactiveIcon when false. Clicking it sends a POST request to the configured path with the toggled value, then calls onChangeSuccess or onChangeError. A spinner replaces the icon while the request is in progress.

Use it for features like starring/un-starring items, enabling/disabling settings, or any binary state that must be persisted to the server.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | boolean | Yes | — | Current state. true shows activeIcon; false shows inactiveIcon. | | path | string | Yes | — | API endpoint that receives a POST with { value: boolean } when toggled. | | activeIcon | string | Yes | — | Icon identifier displayed when value is true. | | inactiveIcon | string | Yes | — | Icon identifier displayed when value is false. | | activeColor | string | No | "primary" | Color of the icon when value is true. | | inactiveColor | string | No | "text" | Color of the icon when value is false. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controls button and spinner size. | | apiBaseUrl | string | No | — | Base URL override for the HTTP request. | | useAuthToken | boolean | No | false | When true, uses the authenticated HTTP client. | | onChangeSuccess | (newValue: boolean) => void | No | — | Callback fired with the new boolean value after a successful request. | | onChangeError | (error: any) => void | No | — | Callback fired when the request fails. | | className | string | No | — | CSS class applied to the wrapper element. | | style | React.CSSProperties | No | — | Inline styles applied to the wrapper element. |

Usage

Basic

import IconToggleButton from '@/components/buttons/IconToggleButton';
import { useState } from 'react';

export default function Example() {
  const [starred, setStarred] = useState(false);

  return (
    <IconToggleButton
      value={starred}
      path="/v1/items/42/star"
      useAuthToken
      activeIcon="starFilled"
      inactiveIcon="star"
      activeColor="warning"
      onChangeSuccess={(val) => setStarred(val)}
      onChangeError={(err) => console.error(err)}
    />
  );
}

Enabled / disabled toggle

import IconToggleButton from '@/components/buttons/IconToggleButton';
import { useState } from 'react';

export default function Example() {
  const [enabled, setEnabled] = useState(true);

  return (
    <IconToggleButton
      value={enabled}
      path="/v1/settings/notifications"
      useAuthToken
      activeIcon="bellFilled"
      inactiveIcon="bellOff"
      activeColor="primary"
      inactiveColor="textLight"
      size="lg"
      onChangeSuccess={setEnabled}
    />
  );
}