Tabs

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

Usage

Default


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

Data table
	Type	Description
aria-describedby	string	Accessible description id for the tablist.
aria-label	string	Accessible name for the tablist.
aria-labelledby	string	Accessible labelledby id for the tablist. Preferred over aria-label when provided.
aria-live	"off" \| "polite" \| "assertive"	Optional aria-live setting if tab changes should be announced by a related region.
className	string	Custom class names to apply to the tabs container.
data-testid	string	Test ID for testing purposes.
defaultIndex	number	Uncontrolled initial index.
idBase	string	Optional stable base used to create ids: `${idBase}-tab-${i}` and `${idBase}-panel-${i}`
onChange	((index: number) => void)	Callback when the active tab changes.
rounding	RoundingType	Rounding of the tabs. "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow style of the tabs. "none" \| "light" \| "medium" \| "strong" \| "intense"
size	SizeType	Size of the tabs. "xs" \| "small" \| "medium" \| "large" \| "xl"
state	StateType	State of the tabs. "success" \| "error" \| "warning" \| "disabled" \| ""
tabListId	string	Optional id for the tablist element itself.
tabs	Tab[]	Array of tabs to display.
theme	ThemeType	Theme for styling the tabs. "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"
value	number	Controlled active tab index.