Tabs - Primer

Ready to use


import {Tabs} from '@primer/react-brand'

Examples

name	type	default	required	description
`children`	`ReactNode`	`undefined`	`true`	Named children to be rendered as tab items and panels. Must include `Tabs.Item`, and optionally `Tabs.Panel` components
`aria-label`	`string`	`undefined`	`true`	Accessible label for the tab list element, used by screen readers to describe the tab group
`variant`	`'default'` \| `'accent'` \| `'underline'`	`'default'`	`false`	Visual style variant of the tabs. Affects the appearance and styling theme
`align`	`'start'` \| `'center'`	`'center'`	`false`	Horizontal alignment of the tab navigation
`defaultActiveTab`	`string`	`'0'`	`false`	Sets the default active tab. “0” (first tab) by default
`onChange`	`(activeTab: string) => void`	`undefined`	`false`	Callback function triggered when the active tab changes. Receives the new active tab identifier
`className`	`string`	`undefined`	`false`	Additional CSS class names to apply to the tabs container for custom styling
`internalAccessibleLabels`	`object`	`undefined`	`false`	Customizable `aria-label` values for screen readers to improve accessibility. Defaults to English.
`internalAccessibleLabels` `.controlsNext`	`string`	`'Next tab'`	`false`	Label for the “next tab” control button, used by screen readers
`internalAccessibleLabels` `.controlsPrev`	`string`	`'Previous tab'`	`false`	Label for the “previous tab” control button, used by screen readers

Forwards all standard HTML attributes for <div> elements.

Individual tab item that users can click to switch between panels.

name	type	default	required	description
`children`	`ReactNode`	`undefined`	`true`	Content to be displayed inside the tab button
`className`	`string`	`undefined`	`false`	Sets a custom class on the tab button element

Forwards all standard HTML attributes for <button> elements.

Content panel associated with each tab. Hidden when not active.

name	type	default	required	description
`children`	`ReactNode`	`undefined`	`true`	Content to be displayed inside the panel
`animation`	`'slide-in-up'` \| `'scale-in-up'` \| `'fade-in'` \| `false`	`false`	`false`	Optional animation when the panel becomes active
`className`	`string`	`undefined`	`false`	Sets a custom class on the panel element

Forwards all standard HTML attributes for <div> elements.