Skip to content
page Docs
DiscordGitHub

Button

The Button component provides buttons with various styles and sizes, and can also be used as links. It offers modern glass effects and gradients.

Basic Usage

Section titled “Basic Usage”

Size Examples

Section titled “Size Examples”

With Icons

Section titled “With Icons”
Section titled “Link Buttons”
🔗

Visit GitHub

 📚

Getting Started Guide

 📦

View on npm

Props

Section titled “Props”
PropTypeDefaultDescription
variant'default' | 'primary' | 'success' | 'warning' | 'error' | 'ghost' | 'gradient''default'Button style
size'sm' | 'md' | 'lg''md'Button size
iconstring-Icon (optional)
hrefstring-Link URL (optional)
targetstring-Link target (optional)
disabledbooleanfalseDisabled state

Usage Examples

Section titled “Usage Examples”

Basic Button

Section titled “Basic Button”
<Button variant="primary">Click me</Button>

Size Adjustment

Section titled “Size Adjustment”
<Button variant="success" size="sm">
  Small
</Button>
<Button variant="success" size="md">
  Medium
</Button>
<Button variant="success" size="lg">
  Large
</Button>

With Icon

Section titled “With Icon”
<Button variant="primary" icon="📥">
  Download
</Button>
Section titled “Link Button”
<Button variant="primary" href="/docs" icon="📚">
  View Documentation
</Button>
Section titled “External Link”
<Button variant="ghost" href="https://github.com" target="_blank">
  GitHub
</Button>
Section titled “Various Link Button Styles”
<Button variant="primary" href="/install" icon="📥">
  Install
</Button>


<Button variant="success" href="/docs" icon="📖">
  Read Docs
</Button>


<Button variant="warning" href="/migrate" icon="🔄">
  Migrate
</Button>


<Button variant="gradient" href="/special" icon="✨">
  Special Feature
</Button>

Disabled Button

Section titled “Disabled Button”
<Button variant="primary" disabled>
  Disabled
</Button>

Features

Section titled “Features”

✨ Modern Design

Section titled “✨ Modern Design”
  • Glass Effect: Applied backdrop-filter: blur(15px)
  • Gradient Background: Beautiful gradient effects
  • Soft Shadows: Multi-layered shadows for depth
  • Hover Animation: translateY(-2px) transform and icon scale effect

🎨 Variant-specific Features

Section titled “🎨 Variant-specific Features”
  • Default: Default style, adapts to light/dark theme
  • Primary: For primary actions, blue gradient
  • Success: For success actions, green gradient
  • Warning: For warning actions, orange gradient
  • Error: For dangerous actions, red gradient
  • Ghost: Transparent background, shows background on hover only
  • Gradient: Special gradient background (new feature)

🌙 Dark Mode Support

Section titled “🌙 Dark Mode Support”
  • Automatic color adjustment
  • Consistent user experience
  • Perfect theme compatibility

📱 Responsive Design

Section titled “📱 Responsive Design”
  • Optimized size on mobile
  • Touch-friendly interface
  • Adaptive padding and font sizes

💫 Animation Effects

Section titled “💫 Animation Effects”
  • Hover Effects: Natural transformation on mouse over
  • Icon Animation: Icon scale effect on hover
  • Click Effect: Pulse animation on click
  • Focus Indicators: Keyboard navigation support

♿ Accessibility

Section titled “♿ Accessibility”
  • Keyboard navigation support
  • Focus indicators
  • Screen reader compatibility
  • Disabled state support

Styling

Section titled “Styling”

The Button component can be customized through CSS variables:

:root {
  --page-button-border-radius: 12px;
  --page-button-padding: 12px 20px;
  --page-button-font-weight: 600;
}

Browser Support

Section titled “Browser Support”
  • Chrome 88+
  • Firefox 85+
  • Safari 14+
  • Edge 88+

Provides optimal performance on modern browsers.