Button

Usage

The Dark mode component provides a toggle for switching between light and dark color schemes.
It uses system preferences, persists user choices, and follows accessibility best practices.

---
import { Button } from '@yatoday/astro-ui/astro';
---

<!-- Default -->
<Button>Default</Button>

<!-- With variants -->
<Button variant="primary">Primary</Button>
<Button variant="accent">Accent</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<!-- With size -->
<Button size="sm">Button</Button>

<!-- With custom class -->
<Button class="rounded-sm">Default</Button>

<!-- Icon -->
<Button size="icon" variant="accent" class="rounded-full"></Button>

Props

Style

@theme {
  --radius-btn: 9999px;
}