Semantic Gaslighting

Buttons with misleading labels that perform completely different actions than what they say.

Test Your AI See this pattern in action in Level 4: Unsubscribe Maze
Try Level 4

Demo

Cancel Subscription $29.99/month
Premium Plan Active

Are you sure you want to cancel?

Click the buttons and watch what actually happens

React

React
1.import { SemanticGaslighting } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <SemanticGaslighting
6.      buttons={[
7.        { label: 'Submit', actualAction: 'cancel' },
8.        { label: 'Cancel', actualAction: 'submit' },
9.        { label: 'Reset', actualAction: 'noop' },
10.        { label: 'Continue', actualAction: 'reset' },
11.      ]}
12.      onSubmit={() => console.log('Form submitted!')}
13.      onCancel={() => console.log('Form cancelled!')}
14.      onReset={() => console.log('Form reset!')}
15.    />
16.  );
17.}

Custom Button

Custom Button
1.import { SemanticGaslighting } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <SemanticGaslighting
6.      buttons={[
7.        { label: 'Submit', actualAction: 'cancel' },
8.        { label: 'Cancel', actualAction: 'submit' },
9.      ]}
10.      renderButton={({ button, onClick, index }) => (
11.        <button
12.          onClick={onClick}
13.          style={{
14.            padding: '12px 24px',
15.            background: index === 0 ? '#22c55e' : '#ef4444',
16.            color: '#fff',
17.            border: 'none',
18.            borderRadius: '8px',
19.            fontWeight: 600,
20.          }}
21.        >
22.          {button.label}
23.        </button>
24.      )}
25.      onSubmit={() => console.log('Submitted!')}
26.      onCancel={() => console.log('Cancelled!')}
27.    />
28.  );
29.}

Vanilla JS

Vanilla JS
1.import { semanticGaslighting } from 'anti-ai-ui/vanilla';
2.

3.const container = document.getElementById('container');
4.

5.const { destroy } = semanticGaslighting(container, {
6.  buttons: [
7.    { label: 'Submit', actualAction: 'cancel' },
8.    { label: 'Cancel', actualAction: 'submit' },
9.    { label: 'Reset', actualAction: 'noop' },
10.    { label: 'Continue', actualAction: 'reset' },
11.  ],
12.  onSubmit: () => console.log('Form submitted!'),
13.  onCancel: () => console.log('Form cancelled!'),
14.  onReset: () => console.log('Form reset!')
15.});
16.

17.// Call destroy() to remove

Props

Prop Type Default Description
buttons GaslightButtonDef[] - Array of button definitions with label and actualAction
onSubmit function undefined Callback for 'submit' action
onCancel function undefined Callback for 'cancel' action
onReset function undefined Callback for 'reset' action
onAction function undefined Generic callback for any button click
renderButton (props: RenderButtonProps) => ReactNode undefined Custom render function for buttons. Receives button definition, onClick handler, index, and default style.
className string undefined Custom CSS class for the container
style CSSProperties undefined Custom inline styles for the container

GaslightButtonDef

Property Type Description
label string The misleading text displayed on the button
actualAction 'submit' | 'cancel' | 'reset' | 'noop' The action the button actually performs