UnderlinePanels

The underline panels are used to break related content into tabbed panels.

Import

import {UnderlinePanels} from '@primer/react/experimental'

Name	Default	Description
aria-label		`string` Accessible name for the tab list
aria-labelledby		`string` ID of the element containing the name for the tab list
childrenRequired		`Array<UnderlinePanels.Tab \| UnderlinePanels.Panel>` Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render
id		`string` Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
loadingCounters	`false`	`boolean` Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.
sx		`SystemStyleObject`

Name	Default	Description
aria-selected	`false`	`\| boolean \| 'true' \| 'false'` Whether this is the selected tab. For more information about `aria-current`, see MDN.
counter		`number \| string` Content of CounterLabel rendered after tab text label
icon		`Component` Icon rendered before the tab text label
sx		`SystemStyleObject`

Name	Default	Description
sx		`SystemStyleObject`