generateHapticFeedback

Controls the device's vibration motor to deliver the specified haptic feedback type. Adds a tactile cue at important interaction moments — a button-tap confirmation, an error alert, a completion celebration.

Signature

import { generateHapticFeedback } from '@apps-in-toss/web-framework';

type HapticFeedbackType =
  | 'tickWeak'
  | 'tap'
  | 'tickMedium'
  | 'softMedium'
  | 'basicWeak'
  | 'basicMedium'
  | 'success'
  | 'error'
  | 'wiggle'
  | 'confetti';

declare function generateHapticFeedback(options: { type: HapticFeedbackType }): Promise<void>;

Parameters

Name	Type	Required	Description
options.type	HapticFeedbackType	✓	Feedback intensity and character. See Feedback types below for a full comparison table.

Feedback types

The type parameter distinguishes feedback intensity and character.

Type	Category	When to use
tickWeak	tick	Light list scroll, segment change
tickMedium	tick	Medium-strength tap, step transition
tap	general	Button tap confirmation
softMedium	soft	Toggle, slider interaction
basicWeak	basic	Subtle notification, hint
basicMedium	basic	Standard selection, confirmation
success	semantic	Payment complete, save success
error	semantic	Error, failure
wiggle	emphasis	Warning, shake
confetti	emphasis	Celebration, reward grant

Returns

• Promise<void> — resolves once the vibration request is delivered.
• In the devtools mock, no actual vibration occurs — a log entry appears in the console instead. Real feedback is only felt inside the Toss app on iOS / Android.

Permission

No permission required — the haptic namespace is not bound to a PermissionName. For the typical permission flow used by other namespaces, see Guides — Permissions pattern.

Examples

Minimal

import { generateHapticFeedback } from '@apps-in-toss/web-framework';

await generateHapticFeedback({ type: 'success' });

Realistic — payment confirmation button

import { generateHapticFeedback } from '@apps-in-toss/web-framework';
import { useState } from 'react';

export function PayButton() {
  const [status, setStatus] = useState<'idle' | 'pending' | 'done' | 'error'>('idle');

  async function handlePay() {
    setStatus('pending');
    try {
      // Your payment logic here.
      await submitPayment();
      await generateHapticFeedback({ type: 'success' });
      setStatus('done');
    } catch {
      await generateHapticFeedback({ type: 'error' });
      setStatus('error');
    }
  }

  return (
    <button type="button" onClick={handlePay} disabled={status === 'pending'}>
      {status === 'pending' ? 'Processing…' : 'Pay now'}
    </button>
  );
}

Try it live

Open the Haptic page in sdk-example and run the generateHapticFeedback card.

→Open in sdk-example

Related guides

• Guides — Permissions pattern — permission flow for other namespaces (reference only; haptic doesn't require a permission).
• Recipes — Haptic feedback patterns

External references

• @apps-in-toss/web-framework — SDK package. The actual exports are re-exported from @apps-in-toss/web-bridge.
• Web standard counterpart: navigator.vibrate — the @ait-co/polyfill package provides a shim that routes generateHapticFeedback through navigator.vibrate.