Anatomy
- Tab item: The complete interactive element containing the label and optional elements
- Tab label: The text that identifies the content section
- Active indicator: Visual indicator (underline) showing which tab is currently active
- Leading icon: (Optional) Icon placed before the label to reinforce meaning
- Counter: (Optional) Numeric badge showing quantity of items within the tab content
Usage Guidelines
When to use this component
- Group and arrange related content in logical, distinct groupings with clear hierarchy, ensuring common information is surfaced appropriately and prioritized effectively.
- Break down complex information into manageable sections to reduce users cognitive load. It’s ideal for forms, settings and dashboards where users don’t need to view all sections at a glance.
-
Use Tabs when content can be separated into clearly labeled sections or categories, where the first one is more relevant than others for most users.
When not to use this component
- For linear workflows or progress indication, use progress indicators, steppers or wizards instead.
- When users need to compare information across different groups simultaneously, use tables instead, as tabs force users to click back and forth.
-
For linking to other pages or creating a navigation, use headers, buttons or links instead. Tabs are meant for same-page content organization.
Best Practices
Use short and scannable labels, with as few words as possible.
Don't use long names as labels and keep them on a single line of text.
Be consistent with the use of icons, and use them to reinforce the label.
Don't use icons only for some tabs, for decorative purposes, or if they do not have a clear connection to the label.
Use counters in tabs to provide meaningful feedback, for instance, notifications about specific sections.
Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.
If necessary, use other elements like segmented control or filters to refine the content of a tab.
Don't nest tabs within tabs for filtering or refinement purposes.
Use sentence case in tab labels.
Don't use title case or all caps in tab labels (except for acronyms) or change the size og the label.
Use headings or information related to all tabs above the tab line.
Don’t use information that applies to all tabs underneath the tab line.
Don't add interactive elements, such as buttons and links, inside the tab item.
General Component Behaviors
Width
Tab items take only the space they need based on their content, with unused space remaining empty on the right side of the container. This allows for efficient space usage while maintaining readability and prevents tab labels from being unnecessarily stretched or distorted.
Tab content positioning
Tab content panels are positioned directly below the tab list to create clear visual hierarchy and proximity between the navigation and content areas. This positioning establishes a strong visual connection between the active tab and its content.
Use Watson spacing scale to provide space between the tabs and their content.
Responsive Behavior
Horizontal scroll in mobile
In the mobile version, if many tabs are needed, they would exceed the width of the viewport and would displayed as an horizontal carousel, requiring horizontal scrolling to navigate through them.
States
There exist four different states for tabs:
- Active: Currently selected tab with visual indicator (underline)
- Default: Tab is enabled but is not selected, showing base styling
- Hover: Interactive state when user hovers over an inactive tab
- Focused: Keyboard focus state for accessibility compliance
Variants
Text only
Basic tabs with text labels only, used for simple content organization without additional visual elements.
Leading icon
Tabs that include icons alongside text labels to reinforce meaning and improve visual hierarchy. Icons should have clear connection to the content.
Counter
Tabs that display numeric badges to show quantity of items or notifications within each section.
Icon and counter
Tabs displaying both reinforcement icon and counter. Use sparingly to avoid overwhelming users.
Content Guidelines
Labels
- Keep tab labels concise, ideally 1-3 words maximum.
- Use sentence case for labels and avoid technical jargon.
- Labels should clearly describe the content users will find in each section.
Badge
- Use meaningful numbers that provide valuable context
- Avoid showing zeros in counters as they don't provide useful feedback.
For further information, see the Content Styleguide.
Research and Additional Reading
Known Gaps
- To revisit the states of the component
- Accessibility documentation is not available yet.