import { useClose } from '@coinbase/onchainkit/minikit';

export default function CloseButton() {
  const close = useClose();

  return (
    <button onClick={close} className="close-btn">
      ✕ Close
    </button>
  );
}
Defined in @coinbase/onchainkit
Allows Mini Apps to close themselves programmatically. Useful for completion flows, cancellation actions, or after successful operations.

​
Returns

​
close
() => void
Function that closes the Mini App frame and returns the user to the host application.
import { useClose } from '@coinbase/onchainkit/minikit';

export default function CloseButton() {
  const close = useClose();

  return (
    <button onClick={close} className="close-btn">
      ✕ Close
    </button>
  );
}

​
Usage Patterns

​
Completion Flows

Close automatically after successful operations:
components/CompletionFlow.tsx
const handleGameComplete = async () => {
  await saveScore(finalScore);
  
  // Show completion screen briefly
  setShowCompletion(true);
  
  // Auto-close after celebration
  setTimeout(close, 3000);
};
Use close instead of navigation for simple flows:
components/NavigationReplacement.tsx
// Instead of navigating back, close the frame
const handleCancel = () => {
  if (hasUnsavedChanges) {
    confirmAndClose();
  } else {
    close();
  }
};

​
Error Recovery

Provide escape routes for error states:
components/ErrorScreen.tsx
if (hasUnrecoverableError) {
  return (
    <div className="error-screen">
      <h2>Something went wrong</h2>
      <p>Please try again later</p>
      <button onClick={close}>Close</button>
    </div>
  );
}

​
Best Practices

​
User Experience

  • Confirm important actions: Ask before closing if user has unsaved work
  • Provide feedback: Show completion states before auto-closing
  • Quick escape: Always provide a way to close, especially in error states

​
Technical Considerations

  • Save state: Persist important data before closing
  • Clean up: Cancel ongoing requests or timers
  • Analytics: Track close events for UX insights
components/HandleClose.tsx
const handleClose = () => {
  // Clean up
  cancelPendingRequests();
  clearIntervals();
  
  // Track analytics
  analytics.track('mini_app_closed', {
    session_duration: Date.now() - sessionStart,
    completion_state: currentState
  });
  
  // Close
  close();
};
useClose provides a clean exit for Mini Apps. Use it thoughtfully to create polished user experiences that feel native to the host application flow.