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>