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

<ButtonGroup>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => console.log('button clicked!')}>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

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

   let active = 1;
</script>

<ButtonGroup>
   <ButtonGroup.Button on:click={() => active = 0} active={active === 0}>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => active = 1} active={active === 1}>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button on:click={() => active = 2} active={active === 2}>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

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

<ButtonGroup>
   <ButtonGroup.Button disabled>
      One
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      Two
   </ButtonGroup.Button>
   <ButtonGroup.Button>
      Three
   </ButtonGroup.Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

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

<ButtonGroup>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={home} />
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={send} />
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Icon slot="icon" data={lock} />
	</ButtonGroup.Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

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

<ButtonGroup>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={home} />
		Paid
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={send} />
		Add
	</ButtonGroup.Button>
	<ButtonGroup.Button>
		<ButtonGroup.Button.Leading slot="leading" data={lock} />
		Workspaces
	</ButtonGroup.Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Icon } from 'stwui';

	const home = "svg-path";
	const send = "svg-path";
	const lock = "svg-path";

   let activeItem: number;
	let loading = false;

	function changeActive(index: number) {
		activeItem = index;
		loading = true;

		setTimeout(() => {
			loading = false;
		}, 2000);
	}
</script>

<ButtonGroup>
	<ButtonGroup.Button
		on:click={() => changeActive(0)}
		active={activeItem === 0}
		loading={activeItem === 0 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={home} />
	</ButtonGroup.Button>
	<ButtonGroup.Button
		on:click={() => changeActive(1)}
		active={activeItem === 1}
		loading={activeItem === 1 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={send} />
	</ButtonGroup.Button>
	<ButtonGroup.Button
		on:click={() => changeActive(2)}
		active={activeItem === 2}
		loading={activeItem === 2 && loading}
	>
		<ButtonGroup.Button.Icon slot="icon" data={lock} />
	</ButtonGroup.Button>
</ButtonGroup>