# Button

A versatile button component for user interaction with various styles, sizes, shapes, and interactive effects.

### **Import**
```tsx
import { Button } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Button } from '@app-studio/web';

export const DefaultButton = () => (
  <Button onClick={() => alert('Hello, World!')}>Default</Button>
);
```

### **variant**
Variant to define the stylistic variation of the button.

- **Type:** `Variant`
- **Default:** `filled`
- **Possible Values:** `filled, outline, link, ghost, empty, subtle`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Vertical } from 'app-studio';
import { Variant } from '@app-studio/web';

export const VariantButtons = () => (
  <Vertical gap={15}>
    {['filled', 'outline', 'link', 'ghost', 'subtle'].map((variant, index) => (
      <Button
        key={index}
        variant={variant as Variant}
      >
        {variant}
      </Button>
    ))}
    <Button variant="link" to="https://google.com" isExternal>
      External Link
    </Button>
  </Vertical>
);
```

### **size**
Optional Size to specify the size of the button.

- **Type:** `Size`
- **Default:** `md`
- **Possible Values:** `xs, sm, md, lg, xl`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Vertical } from 'app-studio';
import { Size } from '@app-studio/web';

export const ButtonSizes = () => (
  <Vertical gap={10}>
    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
      <Button key={index} size={size as Size}>
        Button {size.toUpperCase()}
      </Button>
    ))}
  </Vertical>
);
```

### **shape**
Optional Shape to specify the border radius style of the button.

- **Type:** `Shape`
- **Default:** `rounded`
- **Possible Values:** `sharp, rounded, pillShaped`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Horizontal } from 'app-studio';
import { Shape } from '@app-studio/web';

export const ShapeButtons = () => (
  <Horizontal gap={15}>
    {['sharp', 'rounded', 'pillShaped'].map((shape, index) => (
      <Button key={index} shape={shape as Shape}>
        {shape}
      </Button>
    ))}
  </Horizontal>
);
```

### **isLoading**
Boolean to indicate if the button is in a loading state. Shows a loader and disables interactions.

- **Type:** `boolean`
- **Default:** `false`
- **Related:** `loaderPosition`, `loaderProps`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Vertical } from 'app-studio';

export const LoadingButtons = () => (
  <Vertical gap={15}>
    <Button isLoading>Loading...</Button>
    <Button isLoading loaderPosition="right">
      Submitted
    </Button>
    <Button isLoading isFilled={false} variant="outline">
      Loading Outline
    </Button>
  </Vertical>
);
```

### **animation**
Apply special animation effects to the button.

- **Type:** `Animation`
- **Possible Values:** `borderMoving, animatedStroke, borderReveal`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Vertical } from 'app-studio';

export const AnimatedButtons = () => (
  <Vertical gap={15}>
    <Button 
      animation="borderMoving" 
      borderMovingDuration={2}
      borderMovingGradientColors={['#705CFF', '#FF5C97', '#FFC75C']}
    >
      Border Moving
    </Button>
    
    <Button 
      animation="animatedStroke"
      variant="outline"
      animatedStrokeAccentColor="#705CFF"
    >
      Animated Stroke
    </Button>

    <Button 
      animation="borderReveal"
      variant="outline"
    >
      Border Reveal (Hover)
    </Button>
  </Vertical>
);
```

### **color & backgroundColor**
Override the main color of the button.
- `backgroundColor`: Sets the primary background color (filled variant).
- `color`: Sets the main color token used for text/borders (outline/ghost variants).
- `textColor`: Explicitly sets the text color-

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Horizontal } from 'app-studio';

export const ColoredButtons = () => (
  <Horizontal gap={15}>
    <Button backgroundColor="#F43F5E">Custom Red</Button>
    <Button variant="outline" color="#10B981">Custom Green</Button>
    <Button backgroundColor="theme-primary" textColor="white">
      Theme Primary
    </Button>
  </Horizontal>
);
```

### **icon**
Optional React node(s) defining the icon to be displayed within the button.

- **Type:** `React.ReactNode`
- **Related:** `iconPosition`, `isIconRounded`

```tsx
import React from 'react';
import { Button, DustBinIcon } from '@app-studio/web';
import { Center } from 'app-studio';

export const IconButtons = () => (
  <Center gap={15}>
    <Button icon={<DustBinIcon widthHeight={16} />} size="md">
      Delete
    </Button>
    <Button
      size="md"
      icon={<DustBinIcon widthHeight={16} />}
      iconPosition="right"
    >
      Right Icon
    </Button>
    <Button icon={<DustBinIcon widthHeight={16} />} isIconRounded />
  </Center>
);
```

### **isDisabled**
Optional boolean to indicate if the button is non-interactive/disabled.

- **Type:** `boolean`
- **Default:** `false`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

export const DisabledButton = () => (
  <Button isDisabled onClick={() => alert('Disabled')}>
    Disabled
  </Button>
);
```

### **isAuto**
Optional boolean indicating if the button size should automatically adjust to its content (fit-content).

- **Type:** `boolean`
- **Default:** `true`

### **to**
The destination URL or path for a link button. Renders as a `<a>` or routing link.

- **Type:** `string`

```tsx
<Button to="/dashboard">Go to Dashboard</Button>
<Button to="https://google.com" isExternal>Open Google</Button>
```