按鈕 Buttons

變體 Variants

預設 Primary Filled Outline Ghost Subtle Danger

尺寸 Sizes

XS SM Base

帶圖示

新增 編輯 刪除 下一步 1

按鈕群組

1 2 3

互動按鈕

0

表單 Forms

姓名

電子郵件

密碼

至少 8 個字元 國家 選擇國家 台灣 日本 美國 英國 自我介紹 角色

一般用戶

管理員

版主

權限

讀取

寫入

刪除

接收通知 啟用後將收到系統通知

深色模式

OTP 驗證碼

取消

儲存

分段選擇樣式

基本方案 專業方案 企業方案

對話框與下拉選單

開啟 Modal

操作

編輯 複製

移動到...

資料夾 A

資料夾 B

刪除 懸停查看提示

這是一個提示訊息

設定 (Flyout)

確認操作

這是一個示範的 Modal 對話框，你可以在這裡放置任何內容。

取消 確認

設定

啟用通知

自動儲存

深色模式

資料顯示

徽章 Badges

尺寸 Sizes

小 SM

中 Base

大 LG

顏色 Colors

預設

Zinc

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

內縮樣式 Inset

內縮

小內縮

大內縮

頭像 Avatars

JD

JS

Bo

A

B

C

+5

提示區塊 Callouts

資訊提示

這是一個資訊提示區塊，用於顯示重要資訊。

操作成功完成！

請注意此操作不可復原。

發生錯誤，請稍後再試。

載入骨架 Skeleton

麵包屑導航

用戶管理

編輯用戶

Toast 通知

成功通知

錯誤通知

警告通知

一般通知

圖示 Icons

強調色 Accent

紅色主題

綠色主題

藍色主題

紫色主題

水平導航 Navbar

可滾動導航

垂直導航 Navlist

基本列表

分組列表

個人資料 Profile

JD

John Doe

個人資料 設定

登出

JS

Jane Smith

個人資料 設定

AU

Admin User 個人資料

表單欄位集 Fieldset

帳號資訊

請填寫您的基本資料 使用者名稱

電子郵件

連結 Link

預設連結 Ghost 連結 Subtle 連結 無強調色連結

這是一段包含 內嵌連結 的文字，您可以點擊連結前往相關頁面。 也可以使用 外部連結 在新視窗開啟。

輸入框進階功能

可清除輸入框

可複製輸入框

帶鍵盤提示

⌘K

Filled 變體

帶遮罩 (電話)

小尺寸輸入框

輸入框群組

送出

品牌標誌 Brand

我的應用

Flux UI

文字排版 Typography

特大標題 XL

大標題 LG

一般標題

副標題 Subheading

這是一段普通文字。Flux UI 提供了完整的文字排版元件， 讓您可以輕鬆建立美觀的文字內容。

這是描述文字，通常用於補充說明。

版面元件

左側內容

右側內容

使用 flux:spacer 可以在 flex 容器中自動填充空間

選擇器進階用法

帶圖示的選項 選擇狀態

啟用

停用

待處理

可搜尋選擇器 搜尋國家... 台灣 日本 韓國 美國 英國 德國 法國

導航選單 Navmenu

提示框進階用法 Tooltip

上方

上方提示

下方

下方提示

左側

左側提示

右側

右側提示

自訂提示內容

這是一個包含多行內容的提示框，可以放入任何 HTML 元素。

Modal 更多變體

左側滑出

底部滑出

確認刪除

大型 Modal

左側面板

這是從左側滑入的面板。

底部面板

這是從底部滑入的面板，適合用於行動裝置的操作選單。

確認 取消

確認刪除？

此操作無法復原，確定要刪除這個項目嗎？

取消

刪除

大型對話框

這是一個較大的對話框，適合顯示更多內容。

區塊一

這是第一個區塊的內容。

區塊二

這是第二個區塊的內容。

按鈕進階功能

帶鍵盤提示

儲存

⌘S

發布

⌘⇧P

取消

Esc

彩色按鈕

紅色 橘色 琥珀色 綠色 藍色 靛藍 紫色 粉紅

Loading 狀態

點擊測試 Loading

Submit 自動 Loading

連結按鈕

內部連結 外部連結

Checkbox 全選功能

全選

項目一

項目二

項目三

項目四

已選擇：0 項

檔案上傳 File Input

單一檔案

Choose file

No file chosen

多檔案上傳

Choose files

No file chosen

僅限圖片

Choose file

No file chosen

僅限 PDF

Choose file

No file chosen

Menu 進階用法

篩選

排序方式

最新優先

最舊優先

名稱 A-Z

名稱 Z-A 顯示欄位

選擇顯示欄位

名稱

電子郵件

電話

建立時間

更新時間 更多操作 編輯

⌘E

複製

⌘D

下載

⌘S

刪除

⌘⌫

Switch 進階用法

基本開關

帶描述的開關 這是一段描述文字，說明此選項的用途。

左側對齊

停用狀態

預設開啟

Textarea 進階用法

可調整大小 自動增高 Filled 變體

狀態指示器

Badge 帶圖標

已完成

進行中

已取消

同步中

帶連結的 Badge

可點擊

外部連結

可關閉的 Badge

分頁 Tabs

Pro

預設樣式

首頁 個人資料 設定

這是首頁分頁的內容區塊。

這是個人資料分頁的內容區塊。

這是設定分頁的內容區塊。

Pills 樣式

全部 已發布 草稿 已封存

顯示所有文章。

顯示已發布的文章。

顯示草稿文章。

顯示已封存的文章。

Segmented 樣式

列表 網格 表格

手風琴 Accordion

Pro

什麼是 Flux UI？

Flux UI 是 Livewire 官方的 UI 元件庫，提供了一套精美的 UI 元件，讓您可以快速建立現代化的 Web 應用程式。

如何安裝 Flux UI？

您可以使用 Composer 安裝 Flux UI：composer require livewire/flux。安裝後執行 php artisan flux:publish 發布資源檔案。

Flux Pro 有哪些額外功能？

Flux Pro 提供了更多進階元件，包括 Table、Tabs、Accordion、Card、Slider、Date Picker、Editor 等元件。

如何取得支援？

您可以透過 Flux UI 官方文件、GitHub Issues 或 Discord 社群取得支援。

卡片 Card

Pro

基本卡片

這是一個基本的卡片元件，可以用來包裝任何內容。

了解更多

小尺寸卡片

使用 size="sm" 屬性可以建立較小的卡片。

JD

John Doe

軟體工程師

這是一個帶有使用者資訊的卡片範例。

滑桿 Slider

Pro

基本滑桿

帶範圍限制 (0-100)

帶步進值 (步進: 10)

範圍選擇器

日期選擇器 Date Picker

Pro

基本日期選擇

Cancel Select date

可清除日期

Cancel Select date

日期範圍選擇

Cancel Select range

帶預設選項的日期範圍

Today Yesterday This Week Last 7 Days This Month Year to Date All Time

Choose predefined range... Today Yesterday This Week Last 7 Days This Month Year to Date All Time

Cancel Select range

輸入框樣式

Cancel Select date

帶確認按鈕

Cancel Select date

日曆 Calendar

Pro

基本日曆

可選擇標頭

自動完成 Autocomplete

Pro

搜尋城市

台北 台中 台南 高雄 新北 桃園 搜尋程式語言

PHP JavaScript Python Go Rust TypeScript

富文本編輯器 Editor

Pro

基本編輯器

Text

Styles

Text

Heading 1

Heading 2

Heading 3

Bold ⌘B

Italic ⌘I

Strikethrough ⌘+Shift+S

Bullet list

Ordered list

Blockquote ⌘+Shift+B

Insert link ⌘K

Insert link

Unlink

Left

Align

Left

Center

Right

自訂工具列

Bold ⌘B

Italic ⌘I

Underline ⌘U

Strikethrough ⌘+Shift+S

Text

Styles

Text

Heading 1

Heading 2

Heading 3

Bullet list

Ordered list

Insert link ⌘K

Insert link

Unlink

Blockquote ⌘+Shift+B

檔案上傳 File Upload

Pro

基本拖放上傳

拖放檔案到這裡

或點擊選擇檔案

帶進度條的上傳

上傳圖片

支援 PNG、JPG、GIF 格式

內嵌樣式

選擇檔案

最大 10MB

命令面板 Command

Pro

開啟命令面板

⌘K

前往首頁

⌘H

個人資料

⌘P

設定

⌘,

新增文件

新增資料夾

登出

⌘Q

No results found

右鍵選單 Context Menu

Pro

在此區域按下右鍵試試

復原 重做

剪下 複製 貼上

刪除

彈出框 Popover

Pro

使用者資訊

JD

John Doe

john@example.com

角色

管理員

加入日期

2024/01/15

Radio 卡片樣式

Pro

入門方案

適合個人使用者，每月 $9

專業方案

適合小型團隊，每月 $29

企業方案

適合大型企業，每月 $99

表格 Table

Pro

	用戶	電子郵件	角色	狀態	操作
	王小 王小明	wang@example.com	管理員	啟用	編輯 刪除
	李美 李美玲	lee@example.com	編輯	啟用	編輯 刪除
	張大 張大偉	zhang@example.com	用戶	待驗證	編輯 刪除
	陳雅 陳雅婷	chen@example.com	用戶	停用	編輯 刪除

版面結構元件 Layout

Header 頁首 + Footer 頁尾

我的應用

主要內容區域

© 2025 我的應用. 版權所有.

隱私政策 服務條款

Sidebar 側邊欄

系統

Ad

Admin

個人資料 登出

主要內容區

這是 flux:main 元件包裹的內容區域，會自動佔據 Sidebar 以外的空間。

實際使用時，Sidebar 會搭配 flux:main 元件一起使用，形成完整的版面結構。

Container 容器

Container 內容

Container 元件提供響應式的最大寬度限制和水平置中，適合用於頁面主要內容區。

Main 主內容 + Aside 側邊區塊

Main 主內容區

這是頁面的主要內容區域，通常佔據大部分空間。

Aside 側邊

側邊區塊，可放置相關連結、小工具等輔助內容。

Separator 分隔線

基本分隔線

帶文字分隔線

或

垂直分隔線

項目 A

項目 B

項目 C

Spacer 間隔

頁面標題

取消 儲存

Spacer 在 flex 容器中自動填充空間，常用於將元素推向兩端。

圖表 Chart

Pro

基本折線圖 Line Chart

帶軸線與格線

多條折線圖 Multiple Lines

訪客

頁面瀏覽

區域圖 Area Chart

互動式圖表 (游標 + 提示)

帶摘要的圖表

迷你圖 Sparkline

訪客

+12%

營收

+8%

錯誤率

+3%

標籤選擇器 Pillbox

選擇標籤

設計

開發

行銷

銷售

客服 已選擇：0 個標籤 可搜尋標籤

No results found

PHP

JavaScript

Python

Go

Rust

Java

C#

TypeScript

小尺寸

前端

後端

全端

DevOps 停用狀態

選項 A

選項 B

時間選擇器 Time Picker

Pro

基本時間選擇 12 小時制 24 小時制 輸入框樣式

:  

1 小時間隔 限制時間範圍 (09:00-17:00) 可清除

預設值

訊息編輯器 Composer

Pro

基本用法

帶前置操作按鈕

內嵌按鈕樣式

送出

看板 Kanban

Pro

待辦

2

新增卡片 編輯欄位

刪除欄位

緊急

設計首頁

建立網站首頁設計稿

Al

Alice

中等

撰寫文案

產品介紹文案

Bo

Bob

新增卡片

進行中

1

新增卡片 編輯欄位

刪除欄位

緊急

開發 API

建立 RESTful API

Ch

Charlie

新增卡片

已完成

1

新增卡片 編輯欄位

刪除欄位

一般

環境設置

設定開發環境

Al

Alice

新增卡片

分頁 Pagination

Pro

Pagination 元件需要搭配 Laravel 的分頁器使用。範例程式碼： <flux:pagination :paginator="$orders" />

模擬分頁樣式預覽

顯示 1 至 10 筆，共 100 筆

1 2 3

...

10

簡易分頁（僅上一頁/下一頁）

上一頁 下一頁 1