Skip to content
Clicky UI

Tabs

A controlled tab strip built on {@link TabButton}. Defaults to the underline variant — the row carries a bottom border and the active tab’s underline overlaps it. Render the matching panel yourself based on value.

Source

Import

Section titled “Import”
import { Tabs } from "@flanksource/clicky-ui/components";

Demos

Section titled “Demos”
Underline · Open in Storybook
Pill · Open in Storybook
With Disabled · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Section titled “Props”
Prop Type Default Description
className string — Classes applied to the tablist row.
onChange* (…) => void — Called with the next tab id when a tab is clicked.
tabs* TabItem[] — Tabs to render, in order.
value* string — Currently selected tab id.
variant enum underline Visual style. Defaults to `underline`.