Home/Components/Navigation/FilterTabs

FilterTabs

タブ切り替えフィルターコンポーネント。rounded-lg + bg-brand/10 スタイル。

import { FilterTabs } from "@blueai/ui"

Examples

Basic

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

<FilterTabs
  items={[
    { key: "all", label: "すべて" },
    { key: "active", label: "有効" },
    { key: "archived", label: "アーカイブ" },
  ]}
  activeKey={active}
  onChange={setActive}
/>

With Count

<FilterTabs
  items={[
    { key: "all", label: "すべて", count: 42 },
    { key: "active", label: "有効", count: 38 },
    { key: "archived", label: "アーカイブ", count: 4 },
  ]}
  activeKey={active}
  onChange={setActive}
/>

Props

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