Button

A high-fidelity, interactive button component with multiple variants, sizes, and states.

Preview & Interactive Laboratory

Variants Grid

Sizes Grid

States & Icons

Premium Examples

Usage & Implementation

<Button variant="glass" size="lg" className="shadow-primary/20">
  Get Started
  <ArrowRight className="ml-2 h-4 w-4" />
</Button>
React / Tailwind

Granular Customization

1

Base Button

The main container with base styles and transitions.

className={`className`}
2

Variants

Standard variants like primary, glass, and destructive.

className={`variant='glass'`}
3

Premium Effects

Add custom shadows, gradients, and glow effects.

className={`shadow-primary/20 bg-gradient-to-r ...`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | 'glass''default'The visual style of the button.
size'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg''default'The size of the button.
loadingbooleanfalseShows a loading spinner and disables interaction.
asChildbooleanfalseWhether to render the button as its child element.