Design SystemComponentsTabs

Tabs

Installation

import { Tabs } from "@olab/components";

Overview

分頁切換：一排標籤，點了切換下方內容。有四種現行外觀：underline（預設，底線）、default（實心品牌色膠囊）、newPill（淡底膠囊）、toggle；button 與 pill 已標記 deprecated。

兩種尺寸：sm 28px、md 32px（預設）。block 讓整排撐滿；bordered 在整排外面加一圈膠囊外框。

Interactive Demo

CONTROLLED — pick a tab, value reflects below

Trades content
value = "trades"

State Matrix

VARIANT × STATE — rest / hover (sim) / selected

rest
hover (sim)
selected
default
underline
button (deprecated)
pill (deprecated)
newPill
toggle

沒有 pressed 與 focus 的專屬樣式（見 Spec）。

Examples

SIZE — sm vs md

sm
Trades content
md
Trades content

BLOCK / BORDERED — block fills the parent; bordered adds an outer pill border

Trades content
Trades content

Spec

PartValueSource class
Sizesm 高 28px、左右 12px · md 高 32px、左右 20pxh-7 px-3 / h-8 px-5
Text14px（bodyM）text-bodyM
underline · rest / hover次要文字 → hover 轉主要文字、出現底線text-tertiary → hover:text-primary hover:border-primary
underline · selected品牌色字 + 品牌色底線，mediumdata-[selected]:text-brand-secondary border-[var(--color-bg-brand-solid)]
default · hover淡底hover:bg-secondary
default / newPill · selected品牌色實心 + 對比字data-[selected]:bg-brand-solid text-brand-contrast
newPill · rest / hover淡底 → hover 深一階bg-secondary → hover:bg-tertiary
toggle · selected原意是 YES 淡底 + 深色字；實測底色沒套上（first-child: 不是有效的 Tailwind 寫法），dark 模式下選中項的字跟頁面底色相同、看不見first-child:data-[selected]:bg-outcome-yes-tint text-neutral-950
Gap標籤間 8px；bordered 時 4px 加 4px 內距gap-2 / gap-1 p-1
Pressed / focus沒有定義

數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/tabs.md。

Usage

Do

  • 同一個區塊裡切換幾種平行的檢視：Trades / Positions / History。
  • 內容區的分頁用 underline；工具列上的切換用 default 或 newPill。
  • 標籤文字短，一兩個字就好。

Don't

  • 不要用 button 或 pill 這兩個 deprecated 外觀做新頁面。
  • 不要拿 Tabs 做時間區間切換；那是一排帶 active 的 Button（DurationSwitch 模式）。
  • 不要用 className 改選中色；選中的樣子由 variant 決定。