Anatomy

Tabs consist of a container (A), individual tab items (B), and a selection indicator (C) that highlights the active tab.

Purpose

Tabs are used to switch between related sections or views within the same context.

Standard vs segmented

Use standard tabs for content-heavy sections and segmented tabs for short, action-driven filters or toggles.

Always one active

There must always be one active tab to orient the user or else use chips for selection.

Use for related content only

Tabs should only group content that belongs to the same functional context.

Short labels

Tab labels should be short, clear, and ideally one word.