Filter
Installation
import { Filter } from "@olab/components";Overview
一顆「Filter」按鈕加一個分組下拉選單，選中的條件會在按鈕右邊排成可移除的小標籤。每一組只能選一個，同組選了新的會取代舊的。
按鈕本身就是 secondary Button；打開時按鈕呈選中狀態。點小標籤即可移除該條件。
Interactive Demo
CLICK FILTER — pick from any group; badges appear inline
selectedValues = []
State Matrix
TRIGGER — real component
default
with badges
Active
Bitcoin
disabled
OPEN DROPDOWN — static replica, each option state forced on
Group title
Active · default
Resolved · hover (sim)
Bitcoin · selected
Paused · disabled
Examples
DEFAULT VALUE — badges render on mount
Active
Spec
| Part | Value | Source class |
|---|---|---|
| Trigger | secondary Button（md）+ 20px 篩選圖示；打開時呈選中 | Button skin=secondary active={isOpen} |
| Badge | 高 32px 膠囊，左右 12px，細邊框 | h-8 rounded-full border border-secondary px-3 |
| Badge text | 14px | MediumText text-tertiary |
| Dropdown | 最小寬 240px、最高 360px，20px 圓角 | min-w-60 max-h-90 rounded-2xl border bg-primary |
| Group title | 12px | SmallText text-tertiary px-5 |
| Option | 最小高 36px，圓角 4px | min-h-9 rounded px-2 py-1 |
| Option · hover | 淡底 | hover:bg-secondary |
| Option · selected | 品牌淡底 + 品牌色字 + 勾選 | bg-orange-1 text-brand-secondary |
| Option · disabled | 淡字，不能點 | disabled:text-quaternary |
| Group divider | 1px | bg-tertiary h-px |
數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/filter.md。
Usage
Do
- 列表或表格上方的條件篩選，每一組代表一個維度（狀態、資產）。
- 預設條件用 defaultValue 帶入，讓使用者一眼看到目前套用了什麼。
- 組名寫成名詞（Status、Asset），選項寫成具體值。
Don't
- 不要拿來做多選同一組的篩選；元件規則是每組只能選一個。
- 不要拿來切換整頁內容；那是 Tabs 的工作。
- 不要用 className 改小標籤的樣子；它們代表「點一下就移除」。
Links
- Measured spec
- live-ds-spec/filter.md