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.
<UnderlinePanels aria-label="Select a tab">
<UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab>
<UnderlinePanels.Tab>Tab 2</UnderlinePanels.Tab>
<UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>
<UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>
</UnderlinePanels>
<UnderlinePanels aria-label="Select a tab">
<UnderlinePanels.Tab counter="11K">Tab 1</UnderlinePanels.Tab>
<UnderlinePanels.Tab counter={12}>Tab 2</UnderlinePanels.Tab>
<UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab>
<UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>
</UnderlinePanels>
<UnderlinePanels aria-label="Select a tab">
<UnderlinePanels.Tab icon={CodeIcon}>Tab 1</UnderlinePanels.Tab>
<UnderlinePanels.Tab icon={EyeIcon}>Tab 2</UnderlinePanels.Tab>
<UnderlinePanels.Tab icon={GitPullRequestIcon}>Tab 3</UnderlinePanels.Tab>
<UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
<UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>
</UnderlinePanels>
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.
Loading data for underline_panels...