UnderlinePanels
The UnderlinePanels are used to break related content into tabbed panels.
Page navigation navigation
React
draftNot reviewed for a11y
Rails
readyNot reviewed for a11y
Underlined panels let users switch between 2 or more related panels of content without changing the URL or leaving their current context.
If you want to use this pattern for tabs that change the URL when activated, use the UnderlineNav component instead.
React examples
Default
With counter badges
With leading icons
More code examples
The previous examples are a curated subset of the full capabilities (such as reponsive behavior) of the UnderlinePanels component. For more examples, see the UnderlinePanels Storybook stories.
Props
UnderlinePanels
| Name | Required | Description |
|---|---|---|
aria-label | stringAccessible name for the tab list | |
aria-labelledby | stringID of the element containing the name for the tab list | |
children | Required | Array<UnderlinePanels.Tab | UnderlinePanels.Panel>Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render |
id | stringCustom string to use when generating the IDs of tabs and `aria-labelledby` for the panels | |
loadingCounters | booleanLoading 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 |
UnderlinePanels.Tab
| Name | Required | Description |
|---|---|---|
aria-selected | | boolean | 'true' | 'false'Whether this is the selected tab. For more information about `aria-selected`, see [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected). | |
onSelect | (event) => voidThe handler that gets called when the tab is selected | |
counter | number | stringContent of CounterLabel rendered after tab text label | |
icon | ComponentIcon rendered before the tab text label | |
sx | SystemStyleObject |
UnderlinePanels.Panel
| Name | Required | Description |
|---|---|---|
sx | SystemStyleObject |