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	Move focus to last tab. PGDN should also be assigned to this functionality.
End	Move focus to first tab. PGUP should also be assigned to this functionality.

CSS Source

Controls

Active Selected/Activated tab state.

Centered Center tabs within root container.

With badge Add a badge to the Tab 2.

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-center`	Modifier	Justify center
`.prs-tab`	Part	For <button>
`.prs-tab_active`	State	Currently active