Tab Navigation aid that allows users to switch between different sections or views within the same page.

For best accessibility:
Use button tag for tab. Also make sure to use tabindex="-1" on inactive tabs and tabindex="0" on the active tab so the user can ONLY focus the active tab. You are also responsible for implementing keyboard commands to move the focused tab (arrow left/right, pgup/dn, home/end). The tab and associated tabpanel should activate/follow the active tab. Please use MDN as a reference for full accessibility requirements.

Keyboard requirements

Key	Action
Tab	Focus active tab. Additional press moves focus to active tabpanel flow.
→	Move focus to/activate next tab.
←	Move focus to/activate previous tab.
Home / PGDN	Move focus to last tab.
End / PGUP	Move focus to first tab.

CSS Source

Controls

Vertical Vertical flow.

Scrollable Allow horizontal tabs to scroll on the x axis.

Center Center the tabs container using margin. Only works on horizontal tabs.

With badge Badge example.

State These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.

Default Hover Focus Disabled

Properties Jump to heading

Class / Token	Type
`.prs-tabs`	Component	Container
`.prs-tabs-scrollable`	Modifier	Allow horizontal tabs to scroll on the x-axis
`.prs-tabs-center`	Modifier	Center horizontal tabs
`.prs-tabs-vertical`	Modifier	Vertical flow
`.prs-tab`	Part	For <button>
`.prs-tab-label`	Part	For nested label (needed for proper focus)
`.prs-tab-icon`	Part	For vertical active icon
`.prs-tab_active`	State	Currently active
`--tabs-width`	Token	fit-content
`--tab-color`	Token	var(--prs-c-gray-600)
`--tab-hover-line`	Token	var(--prs-c-secondary-300)
`--tab-hover-color`	Token	var(--prs-c-gray-600)
`--tab-hover-bg`	Token	transparent
`--tab-focus-color`	Token	var(--prs-c-primary)
`--tab-active-line`	Token	var(--prs-c-secondary)
`--tab-active-color`	Token	var(--prs-c-gray-900)
`--tab-active-bg`	Token	transparent
`--tab-active-hover-line`	Token	var(--prs-c-secondary-700)