Button (am-button)

am-button 用於執行操作；提供 href 時會輸出導覽連結。使用明確的動詞文案，讓使用者在操作前知道結果。

使用

先依安裝指南 引入 tokens 與元件樣式，再將以下範例放進 Astro 頁面：

---
import Button from '@astromer/core/components/Button.astro';
---
<Button variant="solid" size="md" type="submit">儲存變更</Button>
<Button variant="outline" href="/settings/">返回設定</Button>

預覽與程式碼

直接試按下方元件；展開「查看程式碼」即可複製目前預覽的完整來源。頁面頂部可切換調色盤與亮暗模式。

操作層級

互動預覽

主要操作用實心按鈕，次要操作降低視覺強度；導覽連結提供 href。

儲存變更另存副本取消查看 Props

查看程式碼可複製完整範例

---
import Button from "@astromer/core/components/Button.astro";
---
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;">
  <Button variant="solid">儲存變更</Button>
  <Button variant="outline">另存副本</Button>
  <Button variant="ghost">取消</Button>
  <Button variant="link" href="/components/button/#props">查看 Props</Button>
</div>

尺寸

互動預覽

依使用情境選擇尺寸，觸控介面優先使用 lg。

xssmmdlgxl

查看程式碼可複製完整範例

---
import Button from "@astromer/core/components/Button.astro";
---
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;">
  <Button size="xs">xs</Button>
  <Button size="sm">sm</Button>
  <Button size="md">md</Button>
  <Button size="lg">lg</Button>
  <Button size="xl">xl</Button>
</div>

狀態與動態回饋

互動預覽

停用與載入中會阻止操作；第三顆按鈕可試按回饋。

尚未符合送出條件正在儲存試按動態回饋

查看程式碼可複製完整範例

---
import Button from "@astromer/core/components/Button.astro";
---
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;">
  <Button disabled>尚未符合送出條件</Button>
  <Button loading>正在儲存</Button>
  <Button gpu>試按動態回饋</Button>
</div>

在 Playground 比較全部狀態。

Props

Prop	可用值／型別	預設	用途
variant	solid、outline、ghost、link	solid	主要、次要或低強調操作的視覺層級
size	xs、sm、md、lg、xl	md	元件尺寸；小尺寸需留意實際觸控範圍
type	button、submit、reset	button	原生 button 行為，表單提交須明確指定 submit
href	string	未設定	輸出 <a>，用於頁面導覽
disabled	boolean	false	標示操作不可用
loading	boolean	false	顯示 spinner、aria-busy，並停用操作
gpu	boolean	false	選用 CSS 按壓回饋
class	string	未設定	附加樣式 class

預設 slot 放按鈕文案。其他原生 button attributes 可直接傳入，例如 name、value、aria-label。

狀態與使用邊界

---
import Button from '@astromer/core/components/Button.astro';
---
<Button disabled>尚未符合送出條件</Button>
<Button loading>正在儲存</Button>

• loading 會停用操作，避免重複送出；button 使用原生 disabled，link 停用導覽與焦點。請由應用程式管理請求、恢復可用狀態與成功／錯誤回饋。
• 以 solid 表示目前區域的主要動作，搭配 outline 或 ghost 呈現次要動作。
• 原生 button 支援 Enter／Space；導覽 link 使用 Enter。請保留可辨識的文案與鍵盤焦點。
• variant="link" 只決定外觀，是否為真正連結由 href 決定。

選用動態回饋

設定 gpu={true} 會啟用 CSS-based jelly 按壓效果。此 prop 目前不會啟動 WebGPU 或 TypeGPU 渲染後端，並會遵守 prefers-reduced-motion。