Tabs component · Kition Tessera

Playground

Layers of the document

Props

This component is set by its content.

What is shown

import { Tabs } from '@kition/tessera-ui'
import { useState } from 'react'

const [activeKey, setActiveKey] = useState("layers")

<Tabs items={items} activeKey={activeKey} onChange={setActiveKey} />

When not to

Two or three views of the same data: use Segmented.

Keyboard

Keys	What they do
`Left, Right`	Open the previous or the next tab, wrapping at the ends; disabled tabs are skipped.
`Home, End`	Open the first or the last tab.

Examples

With a range control

Generations in the last 7d.

tabs.tsx

import { Segmented, Tabs } from '@kition/tessera-ui'
import { useState } from 'react'

export default function Demo() {
  const [range, setRange] = useState<'24h' | '7d' | '30d'>('7d')
  return (
    <Tabs
      extra={<Segmented label="Range" value={range} onChange={setRange} segments={[{ value: '24h', label: '24h' }, { value: '7d', label: '7d' }, { value: '30d', label: '30d' }]} />}
      items={[
        { key: 'usage', label: 'Usage', children: `Generations in the last ${range}.` },
        { key: 'ledger', label: 'Credit ledger', children: 'Every credit added and spent.' },
        { key: 'keys', label: 'API keys', children: 'Keys this account created.' },
        { key: 'audit', label: 'Audit log', disabled: true },
      ]}
    />
  )
}

Props

Tabs

Sections of one page under a row of tabs; arrow keys move between tabs.

Prop	Type	Default	Description
`items`required	`readonly TabItem[]`	—
`activeKey`	`string`	—	The open tab, when the screen holds it (with `onChange`); otherwise `defaultActiveKey` or the first.
`defaultActiveKey`	`string`	—
`onChange`	`(key: string) => void`	—
`extra`	`ReactNode`	—	Content at the end of the tab row (a filter, an action).
`className`	`string`	—
`testId`	`string`	—