Animated Toggle
A stateful animated toggle component for pricing switches, settings, plan choices, and binary UI decisions.
Overview
Animated Toggle gives a button or link a small, useful moment of feedback: a binary choice confirms state.
Use it where a CTA needs to feel responsive and intentional, not theatrical. A button should confirm action, state, or direction; it should not become a tiny stage play that delays the click.
The thing to watch is keeping the markup honest. Use genuine button and anchor elements, preserve focus, fire instantly, and make loading and disabled states obvious. The animation decorates the action; it is never the action.
Install Command
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Usage Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Component Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Example Production Use Case
Use this as button-interaction implementation guidance. Verify the shipped element semantics, anchor/button mode, disabled and loading states, focus-visible behavior, keyboard activation, and reduced-motion handling before relying on exact props, defaults, imports, or installation steps.
Best Used For
- Pricing, settings, and plan-choice moments where a binary state needs visible confirmation.
- Interfaces where the selected state matters more than hover decoration.
- Animated Toggle adds feedback to an action without weakening semantics, focus, or activation speed.
Not For
Not for destructive actions, unclear states, or places where animation hides the label or delays activation.
Performance Budget
Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation.
Accessibility and Mobile
Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile.
Common Mistakes
- Building Animated Toggle with divs instead of real buttons or links.
- Hiding the label during hover.
- Forgetting loading and disabled states.
Changelog
v1.3.0
Jul 30, 2026Breakingv1.2.0
Jul 28, 2026v1.1.0
Jul 21, 2026v1.0.0
Jun 4, 2026Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 96 | Overall toggle box size in pixels. |
activeColor | color | #ff5f00 | Box color when a toggle is active. |
inactiveColor | color | #a1a1aa | Box color when a toggle is inactive. |
duration | number | 0.32 | Icon transition duration in seconds. |
Frequently Asked Questions
When should I use Animated Toggle?
Use it when a pricing or settings switch needs a binary choice that confirms state without delaying the action.
Should Animated Toggle use a real button or link?
Yes. Use `<button>` for actions and `<a>` for navigation.
How should Animated Toggle handle focus?
Use visible focus-visible styles and support keyboard activation.
How should loading states work with Animated Toggle?
Loading should be visually clear and programmatically communicated without hiding the label.
What should reduced motion do for Animated Toggle?
Remove long staggers, scrambles, and looping emphasis while keeping instant state feedback.
Request a Custom Button Animation
Need a custom effect? Tell us what to create.
