Tabs make it easy to explore and switch between different views. Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app. Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.
Default State indicates the typical appearance of an available, but not selected tab.
Active State indicates the currently selected tab, whose associated content is currently being displayed.
Hover State indicates the appearance of a tab being hovered.
Choosing a background
For a consistent experience, use an approved background color combination. Always choose based on your specific needs.
For inline contents, single color backgrounds tend to be best. For page level contents, “Bar Style” tend to work well.
Maintain the aesthetics of clarity with generous padding, especially if using a single color background.
Try to use concise, single word names. This helps maintain the aesthetics and usability of clarity. However, if a tab cannot convey its contents clearly in a single concise word, reach out to a UX Writer and/or expand as needed.