IconToggleButton

IconToggleButton muestra uno de dos íconos según la prop booleana value — activeIcon cuando es true, inactiveIcon cuando es false. Al hacer clic envía una petición POST al path configurado con el valor alternado, luego llama a onChangeSuccess o onChangeError. Un spinner reemplaza al ícono mientras la petición está en curso.

Úsalo para funciones como marcar/desmarcar elementos como favoritos, habilitar/deshabilitar configuraciones, o cualquier estado binario que deba persistirse en el servidor.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | boolean | Sí | — | Estado actual. true muestra activeIcon; false muestra inactiveIcon. | | path | string | Sí | — | Endpoint de la API que recibe un POST con { value: boolean } al alternar. | | activeIcon | string | Sí | — | Identificador del ícono mostrado cuando value es true. | | inactiveIcon | string | Sí | — | Identificador del ícono mostrado cuando value es false. | | activeColor | string | No | "primary" | Color del ícono cuando value es true. | | inactiveColor | string | No | "text" | Color del ícono cuando value es false. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el tamaño del botón y del spinner. | | apiBaseUrl | string | No | — | Sobreescritura de la URL base para la petición HTTP. | | useAuthToken | boolean | No | false | Cuando es true, usa el cliente HTTP autenticado. | | onChangeSuccess | (newValue: boolean) => void | No | — | Callback que se dispara con el nuevo valor booleano tras una petición exitosa. | | onChangeError | (error: any) => void | No | — | Callback que se dispara cuando la petición falla. | | className | string | No | — | Clase CSS aplicada al elemento contenedor. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al elemento contenedor. |

Uso

Básico

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)}
    />
  );
}

Toggle habilitado / deshabilitado

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}
    />
  );
}