MoonUI

Button

Free + Pro

Interactive button component available in both Free and Pro versions with different features.

Unlock Advanced Button Features

Get access to powerful pro features that enhance your button component with advanced capabilities, premium styling options, and optimized performance.

  • Both Free and Pro versions available - Choose based on your needs
  • Free: Basic variants, sizes, loading states, and icon support
  • Pro: All free features plus gradient, glow, glass, neon styles

Pro Features

Unlock advanced capabilities with the Pro version

Premium Variants

Access exclusive gradient, glow, soft, glass, and neon button styles that make your UI stand out

Interactive Animations

Engage users with magnetic hover effects, ripple animations, and smooth floating transitions

Enhanced Loading States

Beautiful loading animations with customizable spinners and loading text support

Advanced Customization

Fine-tune animations with custom colors, magnetic strength, and animation speeds

Performance Optimized

GPU-accelerated animations with automatic performance throttling for smooth experiences

Accessibility First

Respects prefers-reduced-motion and includes proper ARIA attributes for all animations

Installation

Install via CLI

# Default installation (asks for version if Pro license detected)
moonui add button

# Explicit version selection
moonui add button --variant=free  # Install free version
moonui add button --variant=pro   # Install pro version (requires license)

# Installation behavior:
# - Without Pro license: Automatically installs free version
# - With Pro license: Shows selection prompt
# - Free version: components/ui/button.tsx
# - Pro version: components/pro/button-pro.tsx

Usage

Basic Usage

Pro Required

Pro Usage

PRO
Pro Required

Examples

Basic Variants

Core button styles for common actions.

Success Variant

Success button for positive actions.

Button Sizes

From extra small to extra large.

With Icons

Buttons with icons in different positions.

Icon Only Buttons

Compact buttons with just icons.

Loading States

Show loading feedback during async operations.

Disabled States

Disabled buttons for unavailable actions.

Full Width Buttons

Buttons that span the full container width.

Rounded Variants

Different border radius options.

Real-world Examples

Common button patterns in applications.

PRO
Pro Examples

Premium Variants

PRO

Eye-catching styles for special actions.

Pro Required

Magnetic Button

PRO

Interactive button with magnetic hover effect.

Pro Required

Ripple Effect

PRO

Button with ripple animation on click.

Pro Required

Pulse Animation

PRO

Button with continuous pulse animation.

Pro Required

Floating Button

PRO

Button with floating animation effect.

Pro Required

Loading with Animation

PRO

Pro loading state with enhanced animations.

Pro Required