<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">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';
</script>

<Button>
	<Button.Leading slot="leading">
		<Button.Leading.Icon icon="paid" />
	</Button.Leading>
	Default Button
</Button>

<Button>
   Default Button
	<Button.Trailing slot="trailing">
		<Button.Trailing.Icon icon="paid" />
	</Button.Trailing>
</Button>

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

<Button shape="circle" on:click={toggleLoading} {loading}>
	<Button.Icon slot="icon" icon="paid" />
</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}>
      <Icon slot="on" icon="menu" />
      <Icon slot="off" icon="close" />
   </Swap>
</Button>

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