Segmented Tabs

Segmented tabs are used in user interfaces to categorize and display content in an organized, compact manner, allowing for easy navigation between different sections.

Overview

Usage

When to use this component?

Segmented tabs are ideal for organizing content into discrete sections within a single view, such as categorizing product features, sorting user preferences, or segmenting data panels. They are particularly effective in interfaces where space is limited and users benefit from quick access to different but related types of information without navigating away from the current page.

How it works

Segmented tabs create a streamlined, tabbed interface where each tab represents a distinct content category. Users can switch between these categories by clicking on the tabs, which are usually aligned horizontally at the top of the content area. The active tab is highlighted visually, distinguishing it from the others to clearly indicate the currently viewed content. This setup provides an intuitive navigation experience, allowing for efficient information discovery and interaction.

Anatomy

Anatomy Options

Lead-Icon: Positioned at the start of the segmented control to provide a visual cue related to the content.

Segment Label: Describes the segment, indicating different sections within the control (e.g., "Weekly," "Monthly," "Yearly").

Trail-Icon: Positioned at the end of the segmented control, providing an additional visual element for context or functionality.

Dos and Don'ts

Dos	Don'ts
Do label each tab clearly and concisely to ensure users understand the content they relate to.	Don't use vague or ambiguous labels that can confuse users about the content of each tab.
Do use a consistent layout and style for all tabs to maintain visual coherence and usability.	Don't use inconsistent styling across tabs, which can disorient users and degrade the user experience.
Do provide visual feedback on the active tab, such as a different color or underline, to indicate which section is being viewed.	Don't make the active tab look too similar to inactive ones; ensure it stands out clearly.
Do keep the number of tabs manageable; ideally, keep them all visible without scrolling.	Don't overcrowd the tab area with too many tabs, which can overwhelm users and complicate navigation.
Do ensure tabs are easily clickable, with adequate spacing and hit areas, especially for touch interfaces.	Don't make the tabs too small or too close together, which can cause mis-clicks and frustrate users.
Keep the number of segments manageable to avoid overwhelming the user.	Don't neglect accessibility features, such as keyboard navigation and screen reader compatibility.