按鈕 Buttons

按鈕元件提供多種樣式、尺寸和狀態，適用於各種互動場景。

Button 按鈕

基本按鈕元件，支援多種變體和屬性。

變體 Variants

<flux:button>預設</flux:button>
<flux:button variant="primary">主要</flux:button>
<flux:button variant="filled">填滿</flux:button>
<flux:button variant="outline">外框</flux:button>
<flux:button variant="ghost">幽靈</flux:button>
<flux:button variant="subtle">淡色</flux:button>
<flux:button variant="danger">危險</flux:button>

顏色 Colors

<flux:button variant="primary" color="zinc">Zinc</flux:button>
<flux:button variant="primary" color="red">Red</flux:button>
<flux:button variant="primary" color="green">Green</flux:button>
<flux:button variant="primary" color="blue">Blue</flux:button>
<flux:button variant="primary" color="indigo">Indigo</flux:button>
<flux:button variant="primary" color="purple">Purple</flux:button>

尺寸 Sizes

<flux:button size="xs">XS 超小</flux:button>
<flux:button size="sm">SM 小</flux:button>
<flux:button>Base 基本</flux:button>

帶圖示 With Icons

<flux:button icon="plus" variant="primary">新增</flux:button>
<flux:button icon="pencil">編輯</flux:button>
<flux:button icon="trash" variant="danger">刪除</flux:button>
<flux:button icon-trailing="arrow-right">下一步</flux:button>
<flux:button icon="heart" variant="ghost" />

載入狀態 Loading

<flux:button variant="primary" loading>載入中</flux:button>
<flux:button wire:click="save" wire:loading.attr="loading">儲存</flux:button>

快捷鍵 Keyboard Shortcut

<flux:button variant="primary" kbd="⌘S">儲存</flux:button>
<flux:button kbd="⌘⇧P">發布</flux:button>

連結按鈕 Link Button

內部連結外部連結

<flux:button href="/path" variant="primary">內部連結</flux:button>
<flux:button href="https://..." target="_blank">外部連結</flux:button>

停用狀態 Disabled

<flux:button disabled>停用</flux:button>

設定

通知

刪除此項目

編輯 ⌘E

<flux:button icon="cog-6-tooth" tooltip="設定" />
<flux:button icon="bell" tooltip="通知" tooltip:position="bottom" />
<flux:button icon="pencil" tooltip="編輯" tooltip:kbd="⌘E" />

全寬按鈕 Full Width

<flux:button variant="primary" class="w-full">送出邀請</flux:button>

方形按鈕 Square

<flux:button icon="plus" square />
<flux:button square variant="primary">A</flux:button>

內容對齊 Alignment

<flux:button class="w-full" align="start">靠左對齊</flux:button>
<flux:button class="w-full" align="center">置中對齊</flux:button>
<flux:button class="w-full" align="end">靠右對齊</flux:button>

圖示變體 Icon Variants

<flux:button icon="heart" icon:variant="outline">Outline</flux:button>
<flux:button icon="heart" icon:variant="solid">Solid</flux:button>
<flux:button icon="heart" icon:variant="mini">Mini</flux:button>
<flux:button icon="heart" icon:variant="micro">Micro</flux:button>

內縮 Inset

文章已成功發布。

<div class="flex justify-between">
    <flux:heading>文章已成功發布。</flux:heading>
    <flux:button size="sm" icon="x-mark" variant="ghost" inset />
</div>

提交按鈕 Submit

<flux:button type="submit" variant="primary">提交表單</flux:button>

Button Group 按鈕群組

將多個按鈕組合在一起，形成視覺上連貫的群組。

載入中...

基本群組

<flux:button.group>
    <flux:button>左</flux:button>
    <flux:button>中</flux:button>
    <flux:button>右</flux:button>
</flux:button.group>

帶圖示群組

<flux:button.group>
    <flux:button icon="chevron-left" />
    <flux:button>1</flux:button>
    <flux:button>2</flux:button>
    <flux:button icon="chevron-right" />
</flux:button.group>

計數器範例

<flux:button.group>
    <flux:button icon="minus" wire:click="decrement" />
    <flux:button>{{ $counter }}</flux:button>
    <flux:button icon="plus" wire:click="increment" />
</flux:button.group>

附加按鈕 Attached Button

<flux:button.group>
    <flux:button variant="primary">新增產品</flux:button>
    <flux:button variant="primary" icon="chevron-down" />
</flux:button.group>

結合按鈕與下拉選單，提供更多操作選項。

載入中...

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">選項</flux:button>
    <flux:menu>
        <flux:menu.item icon="document-plus">新增文件</flux:menu.item>
        <flux:menu.item icon="folder-plus">新增資料夾</flux:menu.item>
        <flux:menu.separator />
        <flux:menu.item icon="arrow-up-tray">上傳</flux:menu.item>
    </flux:menu>
</flux:dropdown>

<flux:dropdown>
    <flux:button icon="ellipsis-horizontal" variant="ghost" />
    <flux:menu>
        <flux:menu.item icon="eye">檢視</flux:menu.item>
        <flux:menu.item icon="pencil">編輯</flux:menu.item>
        <flux:menu.item icon="trash" variant="danger">刪除</flux:menu.item>
    </flux:menu>
</flux:dropdown>

子選單 Submenu

<flux:dropdown>
    <flux:button icon-trailing="chevron-down">進階選項</flux:button>
    <flux:menu>
        <flux:menu.submenu heading="排序方式">
            <flux:menu.radio.group>
                <flux:menu.radio checked>名稱</flux:menu.radio>
                <flux:menu.radio>日期</flux:menu.radio>
            </flux:menu.radio.group>
        </flux:menu.submenu>
    </flux:menu>
</flux:dropdown>

API 參考

載入中...

屬性	值	說明
variant	outline, primary, filled, ghost, subtle, danger	按鈕樣式
size	xs, sm, base	按鈕尺寸
color	zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose	按鈕顏色（僅限 primary 變體）
type	button, submit	按鈕類型
icon	string	前置圖示名稱
icon:trailing	string	後置圖示名稱
icon:variant	outline, solid, mini, micro	圖示變體樣式
loading	bool	載入狀態
kbd	string	快捷鍵提示
tooltip	string	懸停提示文字
tooltip:position	top, bottom, left, right	提示框位置
tooltip:kbd	string	提示框中的快捷鍵
href	string	連結網址（渲染為 a 標籤）
disabled	bool	停用狀態
square	bool	方形按鈕（無文字時自動）
align	start, center, end	內容對齊方式
inset	bool / top, bottom, left, right	內縮樣式（用於 ghost/subtle）
as	button, a, div	渲染的 HTML 標籤

按鈕 Buttons

Button 按鈕

Button Group 按鈕群組

Dropdown Button 下拉按鈕

API 參考