Tabs

The Tabs component provides a simple way to switch between multiple sections of related content using a tabbed interface.

Usage & Examples

Default

default.tsx

const [activeTab, setActiveTab] = useState(0);
const tabs = [
  { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
  { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
  { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
];

<Tabs
  tabs={tabs}
  defaultIndex={activeTab}
  onChange={setActiveTab}
  theme="primary"
  size="medium"
/>

Props API

19 props
Columns
Tabs props API
Default
Description
aria-describedbystringNoariaAccessible description id for the tablist.
aria-labelstringNoaria"Tabs"Accessible name for the tablist.
aria-labelledbystringNoariaAccessible labelledby id for the tablist. Preferred over aria-label when provided.
aria-live"off" | "polite" | "assertive"NoariaOptional aria-live setting if tab changes should be announced by a related region.
classNamestringNostylingCustom class names to apply to the tabs container.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
defaultIndexnumberNoprops0Uncontrolled initial index.
glassbooleanNopropsconfigured default glass setting (fallback: false)Adds translucent glass styling to the tab controls.
idBasestringNopropsOptional stable base used to create ids: `${idBase}-tab-${i}` and `${idBase}-panel-${i}`
onChange((index: number) => void)NoeventsCallback when the active tab changes.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the tabs. "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostylingconfigured default shadow (fallback: "light")Shadow style of the tabs. "none" | "light" | "medium" | "strong" | "intense"