Skip to content

Tab Design

Tabs allow users to navigate between groups of content within a single page or other container. There are two styles. Default tabs are most commonly used for full pages and large table views. Tab bars are generally used in smaller spaces and have a more subtle appearance.

Tab 1 Tab 2 Tab 3 Tab 4 Tab 1 Panel Tab 2 Panel Tab 3 Panel Tab 4 Panel

In Practice

One tab is always selected by default on page load and only one tab can be active at a time. The default tab is usually the first one in the group on the left, however, this may vary depending on how the user navigates to the page or other system conditions.

Tabs should not be nested within other tab groups.

Accessibility

Design resources

View component in Figma