BadgesButtonWithModal

const BadgesButtonWithModal: React.FC<BadgesButtonWithModalProps>

Defined in: src/core/components/BadgesButtonWithModal.tsx:64

BadgesButtonWithModal - A convenience component that combines BadgesButton and BadgesModal

This component manages the modal state internally, providing a simplified API for the common use case of displaying achievements.

For advanced use cases requiring custom state management or multiple triggers, use BadgesButton and BadgesModal separately.

Example

// Simple usage
<BadgesButtonWithModal
  unlockedAchievements={achievements.unlocked}
/>

// Show all achievements (locked + unlocked)
<BadgesButtonWithModal
  unlockedAchievements={achievements.unlocked}
  showAllAchievements={true}
  allAchievements={getAllAchievements()}
  showUnlockConditions={true}
/>

// Customize position and theme
<BadgesButtonWithModal
  unlockedAchievements={achievements.unlocked}
  position="top-right"
  theme="gamified"
/>

// Inline mode for navigation
<BadgesButtonWithModal
  unlockedAchievements={achievements.unlocked}
  placement="inline"
/>

Example​

Example