按鈕

主要操作、單選狀態與可選下拉行為。所有範例都可直接互動。

UIFormButton

按鈕

主要使用於輸入框旁邊，以 variant 選擇語意色彩，以 appearance 切換實心或外框樣式；secondary 使用綠色，cancel 使用灰色。

實心按鈕

外框按鈕

Disabled

範例：搜尋

查看使用方式

<UIFormButton variant="primary">主要操作</UIFormButton>
    <UIFormButton icon="Search" text="搜尋" />
    <UIFormButton variant="cancel">取消</UIFormButton>
    <UIFormButton variant="danger" appearance="outline">刪除資料</UIFormButton>

UIFormButton icon

按鈕圖示

使用 Lucide 圖示名稱顯示按鈕圖示，可切換圖示位置，也能使用沒有文字的正方形圖示按鈕。

查看使用方式

<UIFormButton icon="Search" text="查詢" />
<UIFormButton icon="ArrowRight" icon-position="right" text="下一步" />
<UIFormButton icon="Trash-2" icon-only aria-label="刪除" variant="danger" />

UIFormButton

按鈕尺寸

支援 sm、md、lg 三種尺寸，預設為 md。

查看使用方式

<UIFormButton text="小型" size="sm" />
<UIFormButton text="中型" size="md" />
<UIFormButton text="大型" size="lg" />

UIFormButtonGroup

按鈕群組溢出

以 sm、md、lg、xl 指定各螢幕尺寸可見的按鈕數量；其餘按鈕會收進垂直三點選單，並保留按鈕圖示。

查看使用方式

<UIFormButtonGroup :sm="1" :md="2" :lg="4" :xl="6" :gap="12">
  <UIFormButton text="編輯" icon="Pencil" />
  <UIFormButton text="複製" icon="Copy" variant="secondary" />
  <UIFormButton text="刪除" icon="Trash-2" variant="danger" />
</UIFormButtonGroup>

UIButtonPageBottom

頁面操作按鈕

用於頁面底部的主要與次要操作，內容由預設 slot 提供。

尚未操作

查看使用方式

<UIButtonPageBottom variant="primary">確認變更</UIButtonPageBottom>

UIButtonIconBlock

圖示區塊按鈕

適合總覽或功能入口，可傳入標題、次標題、說明、圖示與前往位置。

圖片圖片上傳、預覽與空狀態顯示。

查看使用方式

<UIButtonIconBlock title="圖片" subtitle="2 個元件" description="圖片上傳與顯示。" :icon="Images" to="/UI/images" />

UIButtonPageTab

展示頁頁籤

用於 UI 展示頁分類導覽；active 狀態會標示目前頁面並自動捲入可視範圍。

總覽按鈕圖片

查看使用方式

<UIButtonPageTab title="按鈕" to="/UI/buttons" active />

UIButtonChoice

選項按鈕

提供 default、selected、disabled 三種狀態，使用 select event 更新選擇。

查看使用方式

<UIButtonChoice text="下午" state="selected" @select="selectPeriod" />

UIButtonNavMenu

導覽／下拉按鈕

文字、圖示、點擊函式與下拉設定均可自訂；項目可設定為危險色。

查看使用方式

<UIButtonNavMenu text="王小明" :icon="UserRound" has-dropdown :dropdown="menuConfig" />