Luna Button Component Guide

Comprehensive guide for using the Luna Button component with all available variants, sizes, and configurations.

Basic Usage

import { Button } from '@/components/common';

<Button variant="primary" size="medium">
  Click Me
</Button>

Main action button with gradient animation effect. Use for primary CTAs.

<Button variant="primary" size="medium" onClick={handleClick}>
  Primary Button
</Button>

Secondary action button with transparent background and border. Use for secondary actions.

<Button variant="secondary" size="medium" onClick={handleClick}>
  Secondary Button
</Button>

Premium enterprise button with purple gradient. Use for enterprise features.

<Button variant="enterprise" size="medium" onClick={handleClick}>
  Enterprise Button
</Button>

Special button for comparison features with rounded border and subtle hover effects. Use for toggle/compare actions.

<Button variant="compare" size="small" onClick={handleClick}>
  Compare All Plans
</Button>

size="small"

size="medium"

size="large"

Use the `as="a"` prop to render the button as an anchor tag for navigation.

<Button as="a" variant="secondary" href="#demo">
  See Demo
</Button>

<Button as="a" variant="primary" href="https://example.com" 
        target="_blank" rel="noopener">
  External Link
</Button>

<Button variant="primary" disabled>
  Disabled Button
</Button>

Prop	Type	Default	Description
`as`	`'button' \| 'a'`	`'button'`	Element type to render as
`variant`	`'primary' \| 'secondary' \| 'enterprise' \| 'compare'`	`'primary'`	Button visual variant
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button size
`disabled`	`boolean`	`false`	Whether button is disabled
`onClick`	`function`	`-`	Click handler function
`href`	`string`	`-`	Link URL (when as='a')
`target`	`string`	`-`	Link target (when as='a')
`rel`	`string`	`-`	Link relationship (when as='a')
`className`	`string`	`-`	Additional CSS classes
`children`	`ReactNode`	`-`	Button content