Button

<Button variant="secondary">Secondary</Button>

<Button variant="outline">Outline</Button>

<Button variant="ghost">Ghost</Button>

<Button variant="link">Link</Button>

<Button variant="destructive">Destructive</Button>

<Button variant="success">Success</Button>

<Button variant="warning">Warning</Button>

<Button variant="info">Info</Button>

<Button>
  <Mail slot="left-icon" />
  Login with Email
</Button>

<Button>
  Continue
  <ChevronRight slot="right-icon" />
</Button>

<Button iconOnly variant="outline">
  <ChevronRight />
</Button>

<Button pill>Pill Button</Button>

<Button disabled>
  <LoaderCircle slot="left-icon" class="animate-spin" />
  Please wait
</Button>

<div class="flex items-center gap-2">
  <Button size="xs">Extra Small</Button>
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
  <Button size="xl">Extra Large</Button>
</div>

<Button href="/docs">Documentation</Button>