Button

---
import { Button } from "@/components/starwind/button";
---

<Button>Button</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <Button>Button</Button>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Button</Button>
</template>

---
import { Button } from "@/components/starwind/button";
---

<Button>Save</Button>
<Button href="#api-reference" variant="outline">View API</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button>Save</Button>
      <Button href="#api-reference" variant="outline">View API</Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button>Save</Button>
  <Button href="#api-reference" variant="outline">View API</Button>
</template>

---
import { Button } from "@/components/starwind/button";
---

<Button variant="default">default</Button>
<Button variant="primary">primary</Button>
<Button variant="secondary">secondary</Button>
<Button variant="outline">outline</Button>
<Button variant="ghost">ghost</Button>
<Button variant="info">info</Button>
<Button variant="success">success</Button>
<Button variant="warning">warning</Button>
<Button variant="error">error</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button variant="default">default</Button>
      <Button variant="primary">primary</Button>
      <Button variant="secondary">secondary</Button>
      <Button variant="outline">outline</Button>
      <Button variant="ghost">ghost</Button>
      <Button variant="info">info</Button>
      <Button variant="success">success</Button>
      <Button variant="warning">warning</Button>
      <Button variant="error">error</Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button variant="default">default</Button>
  <Button variant="primary">primary</Button>
  <Button variant="secondary">secondary</Button>
  <Button variant="outline">outline</Button>
  <Button variant="ghost">ghost</Button>
  <Button variant="info">info</Button>
  <Button variant="success">success</Button>
  <Button variant="warning">warning</Button>
  <Button variant="error">error</Button>
</template>

---
import { Button } from "@/components/starwind/button";
import Mail from "@tabler/icons/outline/mail.svg";
---

<Button size="sm">small</Button>
<Button size="md">medium</Button>
<Button size="lg">large</Button>
<Button size="icon" aria-label="Open messages"><Mail /></Button>
<Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
<Button size="icon-lg" aria-label="Open messages"><Mail /></Button>

import { Button } from "@/components/starwind/button";
import { IconMail as Mail } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
      <Button size="icon" aria-label="Open messages"><Mail /></Button>
      <Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
      <Button size="icon-lg" aria-label="Open messages"><Mail /></Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
import { IconMail as Mail } from "@tabler/icons-vue";
</script>

<template>
  <Button size="sm">small</Button>
  <Button size="md">medium</Button>
  <Button size="lg">large</Button>
  <Button size="icon" aria-label="Open messages"><Mail /></Button>
  <Button size="icon-sm" aria-label="Open messages"><Mail /></Button>
  <Button size="icon-lg" aria-label="Open messages"><Mail /></Button>
</template>

---
import { Button } from "@/components/starwind/button";
---

<Button class="rounded-none">btn none</Button>
<Button class="rounded-xs">btn xs</Button>
<Button class="rounded-sm">btn sm</Button>
<Button class="rounded-md">btn md</Button>
<Button class="rounded-lg">btn lg</Button>
<Button class="rounded-xl">btn xl</Button>
<Button class="rounded-full">btn full</Button>

import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button className="rounded-none">btn none</Button>
      <Button className="rounded-xs">btn xs</Button>
      <Button className="rounded-sm">btn sm</Button>
      <Button className="rounded-md">btn md</Button>
      <Button className="rounded-lg">btn lg</Button>
      <Button className="rounded-xl">btn xl</Button>
      <Button className="rounded-full">btn full</Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button class="rounded-none">btn none</Button>
  <Button class="rounded-xs">btn xs</Button>
  <Button class="rounded-sm">btn sm</Button>
  <Button class="rounded-md">btn md</Button>
  <Button class="rounded-lg">btn lg</Button>
  <Button class="rounded-xl">btn xl</Button>
  <Button class="rounded-full">btn full</Button>
</template>