Buttons

	<script>
  import { Button } from "flowbite-svelte";
</script>

<Button>Default</Button>
<Button color="alternative">Alternative</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
<Button color="blue">Blue</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>

	<script>
  import { Button } from "flowbite-svelte";
</script>

<Button href="/">Home</Button>

	<script>
  import { Button } from "flowbite-svelte";
</script>

<Button pill>Default</Button>
<Button color="alternative" pill>Alternative</Button>
<Button color="dark" pill>Dark</Button>
<Button color="light" pill>Light</Button>
<Button color="blue" pill>Blue</Button>
<Button color="green" pill>Green</Button>
<Button color="red" pill>Red</Button>
<Button color="yellow" pill>Yellow</Button>
<Button color="purple" pill>Purple</Button>

	<script>
  import { GradientButton } from "flowbite-svelte";
</script>

<GradientButton color="blue">Blue</GradientButton>
<GradientButton color="green">Green</GradientButton>
<GradientButton color="cyan">Cyan</GradientButton>
<GradientButton color="teal">Teal</GradientButton>
<GradientButton color="lime">Lime</GradientButton>
<GradientButton color="red">Red</GradientButton>
<GradientButton color="pink">Pink</GradientButton>
<GradientButton color="purple">Purple</GradientButton>

	<script>
  import { GradientButton } from "flowbite-svelte";
</script>

<GradientButton color="purpleToBlue">Purple to Blue</GradientButton>
<GradientButton color="cyanToBlue">Cyan to Blue</GradientButton>
<GradientButton color="greenToBlue">Green to Blue</GradientButton>
<GradientButton color="purpleToPink">Purple to Pink</GradientButton>
<GradientButton color="pinkToOrange">Pink to Orange</GradientButton>
<GradientButton color="tealToLime">Teal to Lime</GradientButton>
<GradientButton color="redToYellow">Red to Yellow</GradientButton>

	<script>
  import { GradientButton } from "flowbite-svelte";
</script>

<GradientButton outline color="purpleToBlue">Purple to Blue</GradientButton>
<GradientButton outline color="cyanToBlue">Cyan to Blue</GradientButton>
<GradientButton outline color="greenToBlue">Green to Blue</GradientButton>
<GradientButton outline color="purpleToPink">Purple to Pink</GradientButton>
<GradientButton outline color="pinkToOrange">Pink to Orange</GradientButton>
<GradientButton outline color="tealToLime">Teal to Lime</GradientButton>
<GradientButton outline pill color="redToYellow">Red to Yellow</GradientButton>
<GradientButton outline color="redToYellow" class="w-72">Red to Yellow</GradientButton>

	<script>
  import { Button, GradientButton } from "flowbite-svelte";
</script>

<GradientButton shadow color="blue">Blue</GradientButton>
<GradientButton shadow color="green">Green</GradientButton>
<GradientButton shadow color="cyan">Cyan</GradientButton>
<GradientButton shadow color="teal">Teal</GradientButton>
<GradientButton shadow color="lime">Lime</GradientButton>
<GradientButton shadow color="red">Red</GradientButton>
<GradientButton shadow color="pink">Pink</GradientButton>
<GradientButton shadow color="purple">Purple</GradientButton>

	<script>
  import { Button } from "flowbite-svelte";
</script>

<div class="flex justify-center gap-2">
  <Button outline>Default</Button>
  <Button outline color="dark">Dark</Button>
  <Button outline color="green">Green</Button>
  <Button outline color="red">Red</Button>
  <Button outline color="yellow">Yellow</Button>
  <Button outline color="purple">Purple</Button>
</div>

	<script>
  import { Button } from "flowbite-svelte";
  import { EnvelopeSolid } from "flowbite-svelte-icons";
</script>

<Button size="xs"><EnvelopeSolid class="me-2 h-4 w-4" />Extra small</Button>
<Button size="sm"><EnvelopeSolid class="me-2 h-4 w-4" />Small</Button>
<Button size="md"><EnvelopeSolid class="me-2 h-5 w-5" />Base</Button>
<Button size="lg"><EnvelopeSolid class="me-2 h-5 w-5" />Large</Button>
<Button size="xl"><EnvelopeSolid class="me-2 h-6 w-6" />Extra large</Button>

	<script>
  import { Button } from "flowbite-svelte";
  import { ArrowRightOutline, CartSolid } from "flowbite-svelte-icons";
</script>

<Button>
  <CartSolid class="me-2 h-5 w-5" /> Buy Now
</Button>
<Button>
  Choose Plan <ArrowRightOutline class="ms-2 h-5 w-5" />
</Button>

	<script>
  import { Button, Indicator } from "flowbite-svelte";
</script>

<Button class="gap-2">
  Messages
  <Indicator class="bg-primary-200 text-primary-800 text-xs font-semibold" size="lg">2</Indicator>
</Button>

	<script>
  import { Button } from "flowbite-svelte";
  import { ThumbsUpSolid, ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<div class="flex flex-wrap items-center gap-2">
  <Button class="p-2!"><ArrowRightOutline class="h-6 w-6" /></Button>
  <Button pill={true} class="p-2!"><ArrowRightOutline class="h-6 w-6" /></Button>
  <Button outline={true} class="p-2!" size="lg">
    <ThumbsUpSolid class="text-primary-700 h-7 w-7" />
  </Button>
  <Button pill={true} outline={true} class="p-2!" size="xl">
    <ThumbsUpSolid class="text-primary-700 h-6 w-6" />
  </Button>
</div>

	<script>
  import { Button, Spinner } from "flowbite-svelte";
</script>

<Button>
  <Spinner class="me-3" size="4" color="gray" />Loading ...
</Button>
<Button color="alternative">
  <Spinner class="me-3" size="4" />Loading ...
</Button>

	<script>
  import { Button } from "flowbite-svelte";
</script>

<Button disabled>Disabled</Button>

	<script>
  import { Button } from "flowbite-svelte";
  const btn1 = () => {
    alert("You clicked btn1.");
  };
  const btn2 = () => {
    alert("You touched btn2.");
  };
</script>

<Button onclick={btn1}>Button 1</Button>
<Button ontouchstart={btn2}>Button 2</Button>

	<script lang="ts">
  import { Button } from "flowbite-svelte";
  let loading = $state(false);

  async function handleSubmit() {
    loading = true;
    await new Promise((resolve) => setTimeout(resolve, 2000));
    loading = false;
  }
</script>

<Button class="w-32" onclick={handleSubmit} {loading}>Submit</Button>