<Tabs items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]} />Tabs<K extends string = string>
src/components/navigation.tsx
Import
import { Tabs } from "@ossrandom/design-system";Examples
<Space size="sm">
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
variant="line"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
variant="card"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
variant="segment"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
variant="pill"
/>
</Space><Space size="sm">
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
size="xs"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
size="sm"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
size="md"
/>
<Tabs
items={[
{ key: "overview", label: "Overview" },
{ key: "logs", label: "Logs" },
{ key: "settings", label: "Settings" },
]}
size="lg"
/>
</Space>API
extends BaseProps
| Prop | Type |
|---|---|
items required |
readonly TabItem<K>[] |
value |
K |
defaultValue |
K |
variant |
"line" | "card" | "segment" | "pill" |
size |
Size |
onChange |
(key: K) => void; readonly scrollable?: boolean; |