Tabs allow users to move between different views of related content without leave the current page. A tab strip includes at least two tabs. Only one tab is actively engaged at a time and is differentiated from inactive tabs by a colored indicator either on the top or bottom edge of the tab, depending on the variant. Tab strips can cover the full width of the page or be limited to content areas within components such as dialogs, cards, and drawers.
Also known as: Tab, Tabstrip, Tab bar, Tab set
| Salt package | @salt-ds/lab |
|---|
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- Use tabs to organize logically related but mutually exclusive content on a single page.
- Use tabs to prevent users from navigating to another page to complete a task.
- Don’t use tabs when users need to compare information between views.
- Don’t use tabs to communicate progress. Instead, use
Stepper. - Don’t use tabs for primary navigation, taking the user off the current page. Instead, use
Navigation Item.
- All labels should be short and concise.
- Labels should clearly communicate the underlying view.
- Always use sentence case in labels.
- Always use sentence case for badge labels when nesting in a tab.
- Do not wrap labels. Use truncation with
Tooltipif necessary. - Icon and text should match each other semantically.
To import TabsNext and related components from the lab Salt package, use: