Button group

<ButtonGroup>
  <Button>Profile</Button>
  <Button>Settings</Button>
  <Button>Messages</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, GradientButton } from 'svelte-5-ui-lib';
</script>

<ButtonGroup class="space-x-px">
	<GradientButton color="purpleToBlue">Profile</GradientButton>
	<GradientButton color="cyanToBlue">Settings</GradientButton>
	<GradientButton color="greenToBlue">Messages</GradientButton>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, GradientButton } from 'svelte-5-ui-lib';
</script>

<ButtonGroup class="space-x-px">
	<GradientButton pill color="purpleToBlue">Profile</GradientButton>
	<GradientButton pill color="cyanToBlue">Settings</GradientButton>
	<GradientButton pill color="greenToBlue">Messages</GradientButton>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Button } from 'svelte-5-ui-lib';
	const handleClick = () => {
		alert('Clicked');
	};
</script>

<ButtonGroup>
	<Button onclick={handleClick}>Click me</Button>
	<Button>Settings</Button>
	<Button>Messages</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, GradientButton } from 'svelte-5-ui-lib';
</script>

<ButtonGroup>
	<GradientButton shadow color="green">Profile</GradientButton>
	<GradientButton shadow color="pink">Settings</GradientButton>
	<GradientButton shadow color="teal">Messages</GradientButton>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Button } from 'svelte-5-ui-lib';
</script>

<ButtonGroup>
	<Button outline color="red">Profile</Button>
	<Button outline color="green">Settings</Button>
	<Button outline color="yellow">Messages</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Button } from 'svelte-5-ui-lib';
</script>

<ButtonGroup class="space-x-px">
	<Button pill color="purple">Profile</Button>
	<Button pill color="purple">Settings</Button>
	<Button pill color="purple">Messages</Button>
</ButtonGroup>

<script lang="ts">
	import { ButtonGroup, Button } from 'svelte-5-ui-lib';
</script>

<ButtonGroup>
	<Button color="red">Profile</Button>
	<Button color="green">Settings</Button>
	<Button color="yellow">Messages</Button>
</ButtonGroup>