Tabs
Lab componentTabs
Resources
TabsNext switch between different but related content. Users can move between different views without the need to leave the current page. A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.
Two different appearances are available for tabs: Bordered and Transparent.
Tabs can be shown with a divider or inset to help create visual alignment in your UI,
Icons are optional and appear to the left of the label text. An icon can effectively signify the tab’s purpose, as it relates to its underlying content. Additional visual aid makes it easier for users to locate tabs.
Ensure that icon descriptors are used consistently across all tabs within the strip. This helps keep the tabs within the strip equally weighted.
Tabs can feature a badge that serves as a visual cue. They can inform users of additional context, notifications, or new content.
When there are too many tabs to fit in the tabstrip, an overflow menu appears. The overflow menu contains a list of all tabs that are not visible in the tabstrip. Users can access the overflow menu by clicking the chevron icon on the right side of the tabstrip or navigating using the arrow keys.
Buttons can be nested inside TabBar to provide related actions e.g. adding a new tab.
- Provide enough space to display several newly added tabs before overflow is enabled.
- Set the new tab to be the active tab when it is added.
useAriaAnnouncershould be used to provide feedback to screen reader users.
TabActions can be used to add actions to tabs e.g. closing a tab. When closing a tab, a warning dialog may be used when closing a tab will result in data loss.
- Don't use closable tabs for tabs that are essential to the user's workflow.
- Don't allow users to close the last tab in a tabstrip.
useAriaAnnouncershould be used to provide feedback to screen reader users.
Tabs can be set as disabled using the disabled prop.
Tabs supports three active colors: "primary", "secondary" and "tertiary".
Two different appearances are available for tabs: Bordered and Transparent.
Tabs can be shown with a divider or inset to help create visual alignment in your UI,
Icons are optional and appear to the left of the label text. An icon can effectively signify the tab’s purpose, as it relates to its underlying content. Additional visual aid makes it easier for users to locate tabs.
Ensure that icon descriptors are used consistently across all tabs within the strip. This helps keep the tabs within the strip equally weighted.
Tabs can feature a badge that serves as a visual cue. They can inform users of additional context, notifications, or new content.
When there are too many tabs to fit in the tabstrip, an overflow menu appears. The overflow menu contains a list of all tabs that are not visible in the tabstrip. Users can access the overflow menu by clicking the chevron icon on the right side of the tabstrip or navigating using the arrow keys.
Buttons can be nested inside TabBar to provide related actions e.g. adding a new tab.
- Provide enough space to display several newly added tabs before overflow is enabled.
- Set the new tab to be the active tab when it is added.
useAriaAnnouncershould be used to provide feedback to screen reader users.
TabActions can be used to add actions to tabs e.g. closing a tab. When closing a tab, a warning dialog may be used when closing a tab will result in data loss.
- Don't use closable tabs for tabs that are essential to the user's workflow.
- Don't allow users to close the last tab in a tabstrip.
useAriaAnnouncershould be used to provide feedback to screen reader users.
Tabs can be set as disabled using the disabled prop.
Tabs supports three active colors: "primary", "secondary" and "tertiary".
Two different appearances are available for tabs: Bordered and Transparent.
Tabs can be shown with a divider or inset to help create visual alignment in your UI,
Icons are optional and appear to the left of the label text. An icon can effectively signify the tab’s purpose, as it relates to its underlying content. Additional visual aid makes it easier for users to locate tabs.
Ensure that icon descriptors are used consistently across all tabs within the strip. This helps keep the tabs within the strip equally weighted.
Tabs can feature a badge that serves as a visual cue. They can inform users of additional context, notifications, or new content.
When there are too many tabs to fit in the tabstrip, an overflow menu appears. The overflow menu contains a list of all tabs that are not visible in the tabstrip. Users can access the overflow menu by clicking the chevron icon on the right side of the tabstrip or navigating using the arrow keys.
Buttons can be nested inside TabBar to provide related actions e.g. adding a new tab.
- Provide enough space to display several newly added tabs before overflow is enabled.
- Set the new tab to be the active tab when it is added.
useAriaAnnouncershould be used to provide feedback to screen reader users.
TabActions can be used to add actions to tabs e.g. closing a tab. When closing a tab, a warning dialog may be used when closing a tab will result in data loss.
- Don't use closable tabs for tabs that are essential to the user's workflow.
- Don't allow users to close the last tab in a tabstrip.
useAriaAnnouncershould be used to provide feedback to screen reader users.
Tabs can be set as disabled using the disabled prop.
Tabs supports three active colors: "primary", "secondary" and "tertiary".