<script lang="ts">
	import { Button } from 'stwui';
</script>

<Button on:click={() => console.log("I've been clicked!")}>Default button</Button>
<Button type="primary">I am primary</Button>
<Button type="danger">I am scary</Button>
<Button type="ghost">Boo I am a ghost</Button>
<Button type="link" href="https://google.com">I am a link</Button>

<script lang="ts">
	import { Button } from 'stwui';
</script>

<Button loading>Default button</Button>
<Button type="primary" loading>I am primary</Button>
<Button type="danger" loading>I am scary</Button>
<Button type="ghost" loading>Boo I am a ghost</Button>
<Button type="link" loading>I am a link</Button>

<script lang="ts">
	import { Button } from 'stwui';
</script>

<Button disabled>Default button</Button>
<Button type="primary" disabled>I am primary</Button>
<Button type="danger" disabled>I am scary</Button>
<Button type="ghost" disabled>Boo I am a ghost</Button>
<Button type="link" disabled>I am a link</Button>

<script lang="ts">
	import { Button } from 'stwui';

	const home = "svg-path";
</script>

<Button>
	<Button.Leading data={home} slot="leading" />
	Default button
</Button>

<Button type="primary">
	<Button.Leading data={home} slot="leading" />
	I am primary
</Button>

<Button type="danger">
	I am scary
	<Button.Trailing data={home} slot="trailing" />
</Button>

<Button type="ghost">
	Boo I am a ghost
	<Button.Trailing data={home} slot="trailing" />
</Button>

<Button type="link">
	I am a link
	<Button.Trailing data={home} slot="trailing" />
</Button>

<script lang="ts">
	import { Button } from 'stwui';

	const home = "svg-path";
</script>

<Button shape="circle">
	<Button.Icon data={home} slot="icon" />
</Button>

<Button type="primary" shape="square">I am primary</Button>

<Button type="danger" shape="rounded">I am scary</Button>

<Button type="ghost">Boo I am a ghost</Button>

<Button type="link">I am a link</Button>

<script lang="ts">
	import { Button, Swap } from 'stwui';

   let loading = false;

   function toggleLoading() {
      loading = !loading;
   }
</script>

<Button shape="circle" on:click={toggleLoading}>
	<Swap slot="icon" {loading}>
		<Button.Icon data={menu} slot="on" />
		<Button.Icon data={close} slot="off" />
	</Swap>
</Button>

<Button type="primary">
	<Swap {loading} slot="leading">
		<Button.Icon data={menu} slot="on" />
		<Button.Icon data={close} slot="off" />
	</Swap>
	I am primary
</Button>