LockToggleButton

LockToggleButton displays a lock icon that reflects a boolean value — a filled locked icon when true, an unlocked icon when false. Clicking it sends a POST request to the configured path with the toggled value. A spinner replaces the icon while the request is in progress.

Use it for access control UI, such as locking a published record, restricting editing, or toggling a security feature.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | boolean | Yes | — | Current state. true shows the locked icon; false shows the unlocked icon. | | path | string | Yes | — | API endpoint that receives a POST with { value: boolean } when toggled. | | 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 LockToggleButton from '@/components/buttons/LockToggleButton';
import { useState } from 'react';

export default function Example() {
  const [locked, setLocked] = useState(true);

  return (
    <LockToggleButton
      value={locked}
      path="/v1/records/42/lock"
      useAuthToken
      onChangeSuccess={(val) => setLocked(val)}
      onChangeError={(err) => console.error(err)}
    />
  );
}

In a data table row

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

export default function TableRow({ record }: { record: { id: string; locked: boolean } }) {
  return (
    <tr>
      <td>{record.id}</td>
      <td>
        <LockToggleButton
          value={record.locked}
          path={`/v1/records/${record.id}/lock`}
          useAuthToken
          size="sm"
          onChangeSuccess={(val) => console.log('Lock state:', val)}
        />
      </td>
    </tr>
  );
}