Skies.ui元件 (Components)
Button 按鈕
Skies.ui Button：語意變體與尺寸、預設 type=button、焦點與無障礙；觸發器、asChild、API 與範例。
Button 按鈕
Button 以原生 <button> 為基礎，用 cva 管理 variant 與 size。預設 type="button"，放在表單裡不會誤觸 submit。
預設用法
import { Button } from "@skies-ui/ui";
export function Example() {
return (
<>
<Button>主要操作</Button>
<Button variant="outline">次要操作</Button>
</>
);
}變體（variant）
語意由 variant 表達；視覺與主題 token（primary、destructive 等）對齊。
<Button variant="default">default</Button>
<Button variant="secondary">secondary</Button>
<Button variant="destructive">destructive</Button>
<Button variant="outline">outline</Button>
<Button variant="ghost">ghost</Button>
<Button variant="link">link</Button>尺寸（size）
import { Plus } from "lucide-react";
import { Button } from "@skies-ui/ui";
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="新增">
<Plus />
</Button>size="icon" 時請務必加上 aria-label（或 title）描述用途，符合無障礙。
停用與表單
<Button disabled>停用</Button>
<Button type="submit">送出</Button>與 Card 搭配
卡片底部操作列請搭配 Card.Actions，次要動作常用 outline、主要動作 default。詳見 Card。
API 摘要
| 項目 | 說明 |
|---|---|
variant | default | secondary | destructive | outline | ghost | link |
size | default（text-sm）| sm（text-xs）| lg（text-base）| icon |
type | 預設 button；表單送出請設 submit |
className | 傳入額外 class，會與 buttonVariants 合併（tailwind-merge 經由 cn） |
進階樣式可從套件匯出 buttonVariants，在非 <button> 節點上重用同一套語意（例如 asChild 模式可日後擴充）。