Back to BSpace
ComponentsTabThe Component UI for Tab is a navigation element that allows users to switch between different sections or views. It displays tab headers at the top, indicating the active tab and showing corresponding content below. It simplifies content organization and enhances user navigation within an application or webpage.
Guidelines
Design
Updated
Vue
Updated
Flutter
Updated

Anatomy

Displays icons that provide additional visual context to the user. Icons are commonly used to help speed up the recognition of tab functions.
Provides a visualization of the active status of the current tab.
 Display descriptive text for each tab.
Variant on State
Tab Default
Tab Active
When a tab is active, usually its title or appearance is highlighted or a different color so that it is easily recognized by users.
Tab Error
The errors tab refers to situations where a problem or error occurs.
Tab Disable
When a tab is disabled, users typically cannot click or open it, and the tab may be displayed with a color or appearance that indicates it is inactive.
Tab Hover
Used to provide users with visual or interactive responses, such as color changes, animation effects, or the appearance of additional information.
Tab with Icon
Tab can include text along with icons
Notes
  • Circle as an instance of the swap component
  • Select icons from Material Design Icons for consistency and ease of recognition.
  • The icon alone can be confusing; add text for clarification. Use icons without text only if they are common, for example a cross (X) to close.

Usage

Tabs are components used to organise content into sections that are easily accessible without the need to switch pages. Use tabs in the following situations:

  • Use tabs to group related information into different categories, helping to reduce cognitive load.
  • Tabs can be used to organize content such as forms, settings, and dashboards so a user does not have to navigate away from their workflow to complete their task.
  • When screen space is limited and content needs to be organised in sections that can be hidden.

When Not to Use Tabs?

  • Don't use tabs if all the content can be displayed directly without causing confusion.
  • If there are too many tabs, consider other navigation methods such as dropdowns or sidebars to avoid visual overload.
Overflow Tab
Mobile Behavior
  • When the number of tabs exceeds the screen width on mobile devices, tabs should be horizontally scrollable using gesture scrolling. Users can swipe left or right to access hidden tabs.
  • Ensure that the size and readability of tabs and their text are maintained by using responsive units such as em or rem and media queries.

Desktop Behavior

  • If the number of tabs exceeds the screen width on desktop devices, hidden tabs should be collected under a 'More' dropdown. Clicking on this dropdown will display the list of additional tabs.
  • Apply a hover effect to the 'More' dropdown to indicate it is clickable.


Hover and click tab ‘More’
Dropdown list showing more tab option
The ‘More’ tab switched into selected tab

Accessibility

Tabs should be designed for inclusivity so that they can be used by all users, including those with physical or cognitive limitations.

  • Ensure tabs have a clear focus style (e.g. border or highlight) to support keyboard users.
  • Ensure that tab text, active indicators, and other elements have a minimum contrast ratio of 4.5:1 against the background.
  • Provide visual feedback such as hover states or colour changes to indicate which elements are being interacted with.
  • Ensure tabs work well on mobile devices with swipe gesture support as an alternative navigation.

Content

The content inside the tab should be informative, concise, and easy to understand.

  • Should be brief, usually 1-2 words, to provide a clear description of the content represented. Example: ‘Info’, “Settings”, “Reports”.
  • Arrange the tabs in a logical order based on the frequency or relevance of the content. The most frequently used tabs are usually placed in the first position.
  • Ensure that each tab only contains information that is relevant to its label. Avoid hiding too much important information within tabs.
  • If any tab is empty or contains dynamic data, provide fallback content such as ‘No data’ or ‘Select option to view content’.