- Active tab
- Inactive tab
Tabs should be used when an area within the interface contains a variety of content or is becoming cluttered and the displayed content can be grouped into logical sections. The information that is hidden within tabs should not be critical, or prevent the user from moving forward. With the information architecture in mind, there are two levels for placing tabs in an interface:
- Page-level tab navigation
- Inline tabs
When tabs are used to create a page navigation within an experience, a page-level tab navigation is the recommended approach. This implementation has optional borders, to help further create separation between navigation and page content. Generally, as the user clicks through these page-level tabs, the URL is updated.
#Page-level tab navigation
This pattern is for when tabs are useful on a page, but are not integral to way-finding. Generally, inline tabs swap content out without changing the page’s URL.
Inline tabs are available in three different sizes: small, medium, and large.
Tabs are also supported in dark mode.