Orbit Icon Button
A button with an animated orbiting icon, rotating particles, and background glow. Perfect for creative, playful, and interactive UIs.
Demo
Interactive Demo
Hover to see the icon rotate and orbiting particles animate.
tsx
Loading...
Installation
Install the required dependencies to get started:
bash
Loading...
Type Integration
Create a lib folder at the root of your project and add a types.ts file with the following interface. This interface is used by all button components for consistent props and TypeScript support.
typescript
Loading...
Usage
Import and use the OrbitIconButton component in your Next.js application:
tsx
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button content (usually text or icon). |
onClick | () => void | undefined | Click handler for the button. |
className | string | "" | Additional CSS classes for the button. |
disabled | boolean | false | Disables the button if true. |
type | "button" | "submit" | "reset" | "button" | Button type attribute. |
Features
- Animated orbiting icon with rotation and scale on hover
- Orbiting particle effects around the icon
- Background glow effect on hover
- Customizable icon (defaults to star)
- Framer Motion-powered transitions
- Customizable label and style
- TypeScript support
- Production-ready and accessible
Dependencies
Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)