ホーム/コンポーネント/ナビゲーション/フィルタータブ（例） FilterTabs

FilterTabs

ステータスフィルタリングに最適なタブコンポーネント。rounded-lg + bg-brand/10 スタイル。

import { FilterTabs } from "@blueai/ui"

Examples

基本（カウント付き）

const [active, setActive] = useState("all");

<FilterTabs
  items={[
    { key: "all", label: "すべて", count: 120 },
    { key: "active", label: "アクティブ", count: 85 },
    { key: "inactive", label: "非アクティブ", count: 35 },
  ]}
  activeKey={active}
  onChange={setActive}
/>

ステータスフィルター

<FilterTabs
  items={[
    { key: "all", label: "すべて" },
    { key: "draft", label: "下書き", count: 3 },
    { key: "sent", label: "送信済み", count: 12 },
    { key: "signed", label: "署名完了", count: 8 },
  ]}
  activeKey={active}
  onChange={setActive}
/>

Props

Prop	Type	Default	Description
items*	FilterTabItem[]	—	タブ項目の配列 ({ key, label, count? })
activeKey*	string	—	現在選択中のキー
onChange*	(key: string) => void	—	タブ変更時のコールバック
className	string	—	追加CSSクラス

Types

FilterTabItem

{ key: string; label: string; count?: number }