Button Component

A versatile button component with multiple variants and sizes.

• variant (string): Button style variant
  • 'primary' (default) - Blue button
  • 'secondary' - Gray button
  • 'outline' - Outlined button
• size (string): Button size
  • 'small' - Compact button
  • 'medium' (default) - Standard button
  • 'large' - Large button
• disabled (boolean): Disable the button (default: false)

• on:click - Forwarded click event

<script>
	import Button from 'https://your-val.web.val.run/button'
</script>

<!-- Basic usage -->
<Button>Click me</Button>

<!-- With props -->
<Button variant="secondary" size="large">Large Secondary Button</Button>

<!-- Outline variant -->
<Button variant="outline">Outline Button</Button>

<!-- Disabled -->
<Button disabled>Disabled Button</Button>

<!-- With click handler -->
<Button on:click={() => alert('Clicked!')}>
	Click for Alert
</Button>

The component includes hover effects, active states, and smooth transitions. Disabled buttons have reduced opacity and cursor changes.