Best Practices

Properties

Label

• Write a label with at most two words that describes the content of the view.
• Use sentence case, but capitalize proper nouns.
• Don’t write labels that vary a lot in length between options.
• Don’t use personal pronouns. For example, use Application keys instead of My application keys.
• Don’t include redundant words. For example, use only Products and Categories instead of Product permissions and Category permissions.

Icon

Don’t use icons in a Tab, even when combined with a label.

Position

• Position in a container: Considering left-to-right interfaces, Tabs should be in the header of a container, below the title and above the content that can be alternated, always left-aligned. Don’t use Tabs inside a page that already uses Tabs.
• Order of tabs: From general to specific, from most to least frequently used, or alphabetically.

Behavior

Preselecting

Always preselect the first Tab, to avoid confusion and simplify the flow when going through all Tabs.

Switching tabs

Don’t reload the page when switching between tabs.

Disabling

Never disable a Tab. Don’t use Tabs to indicate progress.