# Segmented Tabs

## Overview

<figure><img src="/files/WklZ6Qnu62fWfN649OJ7" alt=""><figcaption></figcaption></figure>

## 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

<figure><img src="/files/IwuWRGKY8DG9b97Bnasw" alt=""><figcaption></figcaption></figure>

### 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.     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/segmentation/segmented-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.