<h2>When to use</h2>
<p>Tabs, accordion, pagination, and view more/less are not used for the same purpose. Ensure the component you are using matches the desired use case, to create an accessible experience for all users.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Tabs</td>
<td>Vertical or horizontal tabs organize and divide similar information appearing in the same context.</td>
</tr>
<tr>
<td><a href="/components/accordion/">Accordion</a></td>
<td>Expands or collapses content in containers, such as panels, to allow for the disclosure of larger amounts of content in a small space.</td>
</tr>
<tr>
<td><a href="/components/pagination/">Pagination</a></td>
<td>Pagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.</td>
</tr>
<tr>
<td><a href="/components/view-more-less/">View more/less</a></td>
<td>Reveals or hides contextual content.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<h3>Contained</h3>
<details data-name='image-block' data-images='[{"alt":"The parts of a contained tab, labeled 1 and 2.","caption":"Contained tabs have a white background and an indicator at the top of the container identifying the current tab. \n\n1. Selected tab: includes a Blue 600 tab indicator, a white background, and the tab label.\n2. Rest tab: unselected container with transparent background and tab label.","url":"https://dds.dell.com/site/production/c2/f8/Tab_Anatomy_Contained_f25b85270c.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Global</h3>
<details data-name='image-block' data-images='[{"alt":"The parts of an inline tab, labeled 1 and 2.","caption":"Global tabs do not have a white container for the tab label. Instead, they show a selected state indicator at the bottom of the current tab.\n\n1. Selected tab: includes a Blue 600 tab indicator at the bottom of the tab, and a label.\n2. Rest tab: unselected tab with label.","url":"https://dds.dell.com/site/production/52/9c/image_3_6dfe375775.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/tabs-used-right/","type":"External"},"title":"Tabs, used right","description":"Read the Nielsen Norman Group&#39;s article on tabs.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/timing-exposing-content/","type":"External"},"title":"Timing guidelines","description":"Read the Nielsen Norman Group&#39;s article on tabs&#39; timing.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use tabs to organize, divide, and categorize related content or data appearing in the same context, meaning the subject and category of a tab group should relate.

Use tabs when content should be accessible without reloading or going to a new page. 

The default tab should show the first or most important thing a user should see, and order should be applied consistently across the experience. 

Group tabs with closely related content next to each other so that users can easily predict the content of each tab. Users may interpret the tabs as site navigation if they are significantly dissimilar, so maintain consistent categories and topics within the tabs and avoid placing tabs at the top of a page. 

If users need to view all the content within the tab containers simultaneously, consider applying an alternate view for the page content.

Tabs are horizontal by default and should not present more than six tabs in a single row. If more tabs are needed, use the vertical alignment. Read more on [layout](/components/tabs/?tab=Design#layout) section.

<details data-name='image-block' data-images='[{"alt":"Example of tabs used on Dell Design System website. ","caption":"The Dell Design System website uses tabs to divide  related documentation content into three similar categories, and maintains the default tab (Overview) as the first one throughout documentation pages.","url":"https://dds.dell.com/site/production/dc/99/Tabs_Usage_dd1ff34193.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Contained or global

Tabs are classified into two kinds: contained or global. 

Contained tabs are used in specific content areas within a page or section, for organizing and categorizing information. 

Global tabs are page wide content and are used in situations when the same tabs group appear across pages or sections.

<details data-name='image-block' data-images='[{"alt":"Example of contained tabs in an application","caption":"Contained have a white background container indicating the current selected tab, and the selected state indicator is located at the top of the selected tab.","url":"https://dds.dell.com/site/production/27/aa/Tabs_Kinds1_f8d3e47c63.png"},{"alt":"Example of global tabs in an application","caption":"Global tabs don’t include a background container, and the selected state indicator is located at the bottom of the tab.","url":"https://dds.dell.com/site/production/5e/00/Tabs_Kinds2_33a3669ce4.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Options

When including icons, badges, or images in tabs, maintain a consistent experience by applying them to all tabs in the same group. If one tab includes an icon, badge, or image, every tab should follow the same option. Ensure they are relevant to the content, reinforcing its meaning.

Do not include icons or badges with images within the same tab.

Tabs in mobile view can have icons, badges, or images.

#### Icons

Both global and contained tabs have the option to add a leading or trailing icon next to the label. Do not use icons on both sides of the tab label. 

Make sure all icons have the same orientation on each tab.

<details data-name='image-block' data-images='[{"alt":"Global and contained tabs with icons before the tab label.","caption":"Global and contained tabs with leading icon placement before the tab label.","url":"https://dds.dell.com/site/production/59/e7/Tabs_Icons1_671e4ebe81.png"},{"alt":"Global and contained tabs with icons after the tab label.","caption":"Global and contained tabs with trailing icon placement after the tab label.","url":"https://dds.dell.com/site/production/9c/84/Tabs_Icons2_ae86425e57.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

#### Badges

Add badges to tabs to enhance visibility. Badges help users quickly identify updates, notifications, or status changes.

Note:

* Tabs cannot contain both badges and images.
* Tabs do not support more than one icon. Avoid adding a badge with an icon if the tab already includes one.

Badges on vertical tabs should stick to the right following the length of the tab with the longest tab label. If the max width of the tab is hit (320px), then the tab label text will wrap to the second line.

<details data-name='image-block' data-images='[{"alt":"Eaxmple of global and contained tabs with badge.","caption":"\nGlobal and contained tabs with badge.","url":"https://dds.dell.com/site/components/tabs/tabs-badge-desktop.png"},{"alt":"Example of badges on vertical tabs sticking to the right.","caption":"\nExample of badges on vertical tabs sticking to the right.","url":"https://dds.dell.com/site/components/tabs/tabs-badge-specs-2.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

#### Images

There is an option to add an 80-by-80 pixel image to a global tab, which also displays in the responsive, stacked view of the tab. 

Do not add both images and icons to global tabs.

<details data-name='image-block' data-images='[{"alt":"Global tab with 80-by-80 pixel image.","caption":"A global tab with an 80-by-80 pixel image above the tab label.","url":"https://dds.dell.com/site/stage/5e/de/Tab_Options_Images_Inline_f62c33174e.png"},{"alt":"Responsive, stacked global tab with 80-by-80 pixel image.","caption":"The responsive, stacked view of a global tab with an 80-by-80 pixel image.","url":"https://dds.dell.com/site/stage/02/c5/Tab_Options_Images_Stacked_e230648f4f.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

### Tab overflow

To avoid overwhelming users by presenting too many options, try to limit the number of tabs to six. If more than six are required, consider using a different way to map content on your application, including creating individual pages for larger topics. 

For long labels that extend past one or two words, the label text will truncate. Upon hover, a browser label will feature the full text of the tab.

Depending on the number of tabs, the length of the labels, the device, and the screen or grid size, an overflow state in an action menu dropdown, labeled “More” appears. Selecting “More” displays a list of additional tabs.

<details data-name='image-block' data-images='[{"alt":"Overflow tab with an action menu dropdown labeled “More” presenting the additional tabs.","caption":"An overflow state with an action menu dropdown labeled “More” presenting the additional tabs.","url":"https://dds.dell.com/site/production/96/d3/Tab_Overflow_6b78e68065.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Vertical tabs

Vertical tabs have the same functionalities as horizontal tabs but are displayed in a vertical space. Use vertical tabs, if needed, for a large number of tabs, since it will not require a truncated view.

If vertical tabs are used in mobile or small and extra-small screens, they will be displayed with the mobile stacked view.

<details data-name='image-block' data-images='[{"alt":"Vertical tabs layout in a desktop view. ","caption":"Vertical tabs layout in a desktop view.","url":"https://dds.dell.com/site/production/0c/2d/Vertical_tabs_2837bc74cf.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Mobile responsiveness

Tabs are responsive and adapt to smaller screens. On mobile devices, tabs can include icons, badges, or images.

The tabs responsiveness on small and extra-small screens depends on the variant used.

* For **vertical** layout, use **contained** **tabs**. Stacked tabs are easier to read and ideal for longer labels or more complex content.
* For **horizontal** layout, use **global** **tabs**, with justified alignment. Limit the number of tabs to 2 or 3, depending on label length, to keep navigation clear and accessible.

<details data-name='image-block' data-images='[{"alt":"Example of vertical layout in mobile view, using contained tabs.","caption":"\nExample of vertical layout in mobile view, using contained tabs.","url":"https://dds.dell.com/site/components/tabs/tabs-badge-vertical.png"},{"alt":"Example of horizontal layout in mobile view, using global tabs.","caption":"\nExample of horizontal layout in mobile view, using global tabs.","url":"https://dds.dell.com/site/components/tabs/tabs-badge-horizontal.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behavior and states

<details data-name='image-block' data-images='[{"alt":"Four states of a tab.","caption":"Tabs can communicate four different states based on user interaction: rest, hover, focus, pressed, or selected.","url":"https://dds.dell.com/site/production/08/d7/State_b774ef195a.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                                                                                        |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The tab label should be Gray 800. For the contained variant, inactive tabs also include a gray line outlining the tab.                                                                          |
| Hover    | For both global and contained tabs, the tab background changes to Gray 100, and the text icons change to Blue 600.                                                                              |
| Focus    | Adds a Blue 800 outline around the tab area and the text changes to blue. It also includes a white border on the inside.                                                                        |
| Pressed  | Changes its color to Grey 300, indicating the tab is in the act of being pressed.                                                                                                               |
| Selected | The selected or current tab label and indicator line are Blue 600, regardless of the type of tab. For XS to S (extra-small to small) grids, the tab label is Gray 800 when in the stacked view. |

## Standards

### Accessibility

#### Contained tab content should be shorter and standalone

Contained tabs visually enclose the content inside, separating them from the rest of the page. Content inside should be fairly brief, specific to the tab’s label, and stand on its own within the page. 

If the tab content is broad or long, use basic tabs.

#### Use tab icons carefully

Generally, tab icons should be avoided unless they make understanding the tab labels easier. The meaning of any chosen icon should be visually self-evident (easily and universally understood) and support the tab label. 

Don’t use icons that could be mistaken for UI controls, such as chevrons or plus icons.

#### Observe standard tab keyboard patterns when annotating accessibility

If annotating keyboard navigation order in your designs, remember the entire tab panel will be a single ‘tab stop’ (navigation step with the keyboard ‘tab’ key). Focus is placed by default on the first tab in the panel, with the others navigable with the left and right arrow keys (horizontal tabs) or up and down arrow keys (vertical tabs).

W3C Authoring Practices Guide (APG): [Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)

### Content

#### Capitalization and case

Use sentence case (capitalize only the first word) unless referring to a proper noun.

#### Punctuation

Do not punctuate tab labels.

#### Label length

Keep the label text to one or two words and use plain language to accurately describe the content associated with each tab.  

If you need longer labels, it may be a sign that the categories are too complicated for a tab control. 

The character length of a label will affect the width of the tab, and potentially cause other tabs to be truncated, only appearing if the tab “more” is pressed.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-tabs--basic).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-tabs--basic&viewMode=docs&websiteFrame=true''></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-tabs--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-tabs--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-tabs--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-tabs--docs&viewMode=docs&websiteFrame=true'></details>

Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.

Tabs

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
