Pill Toggle With Icon 1
Animated pill toggle with icons that slides between options with smooth spring physics. Component used in Colouring Page.
A pill-shaped toggle switch with icons and labels that smoothly animates between states.
The white highlight slides behind your selected option with spring physics that feels responsive and polished. Each option gets an icon and label, both customizable through props.
Pass in your own options array to create custom toggles for view modes, filters, or any binary/multiple choice selection. The component tracks state internally but also fires onChange callbacks so you can sync it with your app state.
Built with Framer Motion for buttery smooth animations and Tabler Icons for the default icon set.
Install Component
Run Claude Code then copy and paste this command
Sign In to Build
Join with a free account
Claude Code will install this into the /src/components folder in your project
Tell Claude Code where you want to use this
Key Features
Smooth spring physics animation when switching options
Fully customizable options with icons and labels
Controlled or uncontrolled state management
Works with any number of toggle options
Clean hover states on inactive options
Use Cases
Switching between list and grid view modes in your app
Toggling between simple and detailed data displays
Creating filter controls for content types
Building segmented controls for settings panels
Frequently Asked Questions
Used In
Dependencies
These will be automatically installed when you add this component to your project.
Member