Tabs

Underline tabs for detail pages and pill tabs for page headers.

The gateway answered in 1.2 s.

<Tabs defaultValue="overview" className="w-480">
      <Tabs.List aria-label="Request">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="conversation">Conversation</Tabs.Tab>
        <Tabs.Tab value="request">Request</Tabs.Tab>
        <Tabs.Tab value="response">Response</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="overview" className="pt-16 text-body text-fg-secondary">
        The gateway answered in 1.2 s.
      </Tabs.Panel>
    </Tabs>

import { Tabs, PillTabs } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
The tab list and the panels.
defaultValue
string
The selected tab on first render.
onValueChange
((value: string) => void)
Called with the selected tab.
value
string
The selected tab, when you control it.
variant
"pill" | "underline"
Underlined tabs for pages, or pills for small groups.