Skip to content
MoonUIMoonUI
ComponentsTemplatesPricing
Sign inGet started

Getting started

  • Introduction
  • Installation
  • CDN
  • Authentication
  • shadcn CLI
  • MCP Server
  • Usage

Components

Foundation25 components
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Button
  • Button Group
  • Checkbox
  • File Upload
  • Input
  • Kbd
  • Label
  • Radio Group
  • Rating
  • Select
  • Slider
  • Switch
  • Textarea
  • Toggle
  • Toggle Group
  • Separator
  • Tags Input
  • Color Picker
  • Date Picker
  • Simple Editor
  • Input OTP
Layout10 components
  • Accordion
  • Breadcrumb
  • Card
  • Carousel
  • Collapsible
  • ResizablePro
  • Scroll Area
  • StepperPro
  • Table
  • Tabs
Navigation & Overlays11 components
  • Alert DialogPro
  • Command
  • Context MenuPro
  • Dialog
  • Dropdown Menu
  • Hover CardPro
  • MenubarPro
  • Pagination
  • Popover
  • SheetPro
  • Tooltip
Feedback4 components
  • Progress
  • Skeleton
  • Spinner
  • Toast
Data & Analytics4 components
  • Data TablePro
  • Advanced ChartPro
  • DashboardPro
  • WidgetsPro
Navigation4 components
  • Command AI+Pro
  • SidebarPro
  • NavbarPro
  • Navigation MenuPro
AI Chat4 components
  • MessagePro
  • Message ScrollerPro
  • AttachmentPro
  • Conversation MarkerPro
Content Management6 components
  • Advanced FormsPro
  • Form WizardPro
  • Quiz FormPro
  • Credit Card InputPro
  • Phone Number InputPro
  • Rich Text EditorPro
Project Management3 components
  • KanbanPro
  • TimelinePro
  • CalendarPro
Performance & Utility8 components
  • Virtual ListPro
  • Memory Efficient DataPro
  • Lazy ComponentPro
  • Optimized ImagePro
  • Performance MonitorPro
  • Performance DebuggerPro
  • Error BoundaryPro
  • Health CheckPro
Interactive & Animation15 components
  • Animated NumberPro
  • Floating DockPro
  • Text RevealPro
  • Image ComparePro
  • Splash CursorPro
  • GitHub StarsPro
  • Animated ButtonPro
  • Magnetic ButtonPro
  • Magnetic ElementsPro
  • Mouse TrailPro
  • Hover Card 3DPro
  • Spotlight CardPro
  • Floating Action ButtonPro
  • LightboxPro
  • Media GalleryPro
Gesture & Touch7 components
  • Swipeable CardPro
  • Draggable ListPro
  • Pinch ZoomPro
  • Swipe ActionsPro
  • Gesture DrawerPro
  • Click AnimationsPro
  • Touch GesturesPro
Text Animations12 components
  • Text HighlighterPro
  • Typewriter TextPro
  • Scrambled TextPro
  • Word RotatePro
  • Morphing TextPro
  • Flip TextPro
  • Number TickerPro
  • Glitch TextPro
  • Shiny TextPro
  • Wavy TextPro
  • Gradient TextPro
  • Text 3DPro
Animations12 components
  • Animated ListPro
  • Bounce EffectPro
  • Blur FadePro
  • Elastic AnimationPro
  • MarqueePro
  • Parallax ScrollPro
  • Reveal CardsPro
  • Scroll RevealPro
  • Fade TransitionsPro
  • Focus TransitionsPro
  • Path AnimationsPro
  • SVG AnimationsPro
Layouts1 components
  • Bento GridPro
Effects9 components
  • ConfettiPro
  • Cursor TrailPro
  • Glow EffectPro
  • Pixel ImagePro
  • Neon EffectPro
  • ShimmerPro
  • RipplePro
  • SparklesPro
  • SpotlightPro
Backgrounds17 components
  • Grid PatternPro
  • MeteorsPro
  • Aurora BackgroundPro
  • ParticlesPro
  • StarfieldPro
  • Dot PatternPro
  • Grid DistortionPro
  • WavesPro
  • Matrix RainPro
  • Liquid BackgroundPro
  • Mesh GradientPro
  • Glitch BackgroundPro
  • Gradient FlowPro
  • Floating ElementsPro
  • Bubble BackgroundPro
  • Geometric PatternsPro
  • Code SnippetsPro
Special UI1 components
  • Glow CardPro
Showcase8 components
  • iPhone MockPro
  • Android MockPro
  • Safari MockPro
  • GlobePro
  • Dotted MapPro
  • Icon CloudPro
  • Tweet CardPro
  • File TreePro

Advanced

  • Theming
  • Customization
  • CLI
  • Help & Support
  1. Docs
  3. Components
  5. Toggle

Toggle

Free + Pro

Enhanced two-state button component with smooth animations, multiple variants, and improved accessibility. Perfect for toggling options, settings, and formatting tools.

Pro

What Pro adds to Toggle

The free toggle is MIT-licensed. The Pro version builds on it with:

  • 9 color variants including gradient
  • 6 size options (xs to xl)
  • 4 shape variants
See pricing

Pro features

What the Pro version adds to this component.

  • 9 Color Variants

    Primary, secondary, success, warning, danger, and gradient options

  • 6 Size Options

    From extra small to extra large for any use case

  • 4 Shape Variants

    Default, square, rounded, and pill shapes

  • Loading States

    Built-in loading spinner for async operations

  • Badge Support

    Display counts or labels with customizable badges

  • Dynamic Icons

    Switch between icons based on toggle state

Installation

Install via CLI

npx @moontra/moonui-cli add toggle

Usage

Basic Usage

Pro required

Pro Usage

Pro
Pro required

Examples

Basic Toggle

Simple toggle with icon

Sizes

Different toggle sizes with state management

Variants

Different visual styles with interactive states

Controlled

Controlled toggle with state

Audio Toggle

Toggle with dynamic icons

Formatting Toolbar

Multiple toggles for text formatting

Pro
Pro examples

Color Variants

Pro

Multiple color options for different use cases

Pro required

Size Variants

Pro

Five steps of the canonical size scale with interactive states

Pro required

Shape & Badge

Pro

Different shapes with badge support and interactive states

Pro required

Icons & Loading

Pro

Dynamic icons with loading states

Pro required
Previous
Textarea
Next
Toggle Group
MoonUIMoonUI

168 React components. 45 free under MIT, 123 Pro.

Unsubscribe anytime.

Product

  • Components
  • Templates
  • Pricing

Resources

  • Documentation
  • GitHub
  • Support

Legal

  • Privacy
  • Terms
  • Refund Policy
Made by Moontra Software
  • X
  • LinkedIn
  • GitHub
  • YouTube