> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/tab-button.md).

# Tab Button

Tab buttons allow users to navigate between different views or sections within the same context.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FBQgm3EtgO9U8kFnCSIOH%2FFrame%2046.png?alt=media&amp;token=5ab5bc19-0769-47aa-a073-c8c63be305aa" alt="" width="330"><figcaption></figcaption></figure>

## Overview

Tab buttons offer a simplified way for users to switch between different content areas within the same page, allowing users to quickly access and manage related views without leaving the current interface.

{% embed url="<https://www.figma.com/design/4NwKhd4dwRhRF5Zpiooi69/Components?node-id=2-174676&t=0Thv0LIO2gFzE3eo-4>" %}

## When to use

* Use Tab buttons when you need to organize content into categories or sections within the same page or interface.
* Tab buttons are ideal when you want to enable users to access different content without reloading or navigating to a new page.
* Use Tab buttons to keep users focused within a specific area of the interface, allowing them to toggle between relevant content or features.
* **When designing a nav bar, use the Light or Subtle style and activate line in the properties section.**

## When not to use

* Avoid using Tab buttons for navigating between entirely different pages or sections of a website. Use navigation tabs or a sidebar menu instead.
* If the content hierarchy is complex and deep, with multiple sub-levels, avoid Tab buttons as they might overwhelm users. Consider using an accordion or nested menus instead.
* Do not use Tab buttons if each section contains only minimal content that doesn't require categorization. A simple layout or scrolling view would be more appropriate.

## Types

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FZXioULYeHrOKA39Pag6U%2FVariants.png?alt=media&amp;token=f90b86fd-e2f9-4e2c-97df-46f562b0c108" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Type</th><th width="567">Description</th></tr></thead><tbody><tr><td>Accent Button</td><td>Visually distinct buttons to highlight key actions within an interface</td></tr><tr><td>Primary Button</td><td>For the important actions users can take.</td></tr><tr><td>Nav Bar</td><td>Used for quick navigation within a toolbar or menu.</td></tr></tbody></table>

## Anatomy

1. **Button Container:** The primary structure holding the icon and text, defining the button's shape.
2. &#x20;**Icon Leading:** An optional icon positioned before the text, indicating the tab's function.
3. **Text:** The descriptive text that communicates the purpose of the tab.
4. **Icon Trailing:** An optional icon placed after the text, often used for additional actions.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2F8P4FaBRgYPjyJXqjkqwH%2FAnatomy.png?alt=media&amp;token=af0910e7-3272-41b5-9a9a-af38f42fd5d2" alt=""><figcaption></figcaption></figure>

## Styles

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2Fpo8XAkJnDoOxwlUJV6si%2FStyle.png?alt=media&amp;token=22171c56-7ff8-44f8-a7d8-e77013d1683b" alt=""><figcaption></figcaption></figure>

## States

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FJUtNmGmNxV1EzC042ACb%2FState.png?alt=media&amp;token=f552b962-4f17-412d-b6e4-2ce8eadbae27" alt=""><figcaption></figcaption></figure>

## Size

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2F2xShtKT1f5XcztmFTPFh%2FSize.png?alt=media&amp;token=abd69b88-4d85-4003-ade3-98f03da5b813" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Size</th><th>Text (px)</th><th width="148">Icon (px)</th><th>Container Height (px)</th></tr></thead><tbody><tr><td>Small</td><td>14</td><td>16</td><td>32</td></tr><tr><td>Medium</td><td>16</td><td>20</td><td>40</td></tr><tr><td>Large</td><td>18</td><td>24</td><td>48</td></tr><tr><td>Huge</td><td>22</td><td>32</td><td>60</td></tr></tbody></table>

## Alignment

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FkH7o6cksf5VNgojIl7DC%2FAlignment.png?alt=media&amp;token=12f80a90-1fc4-4c7e-89ac-1c2b98d6e4a8" alt=""><figcaption></figcaption></figure>

## Block

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FssvhAQUSxHXqOGlMhH88%2FBlock.png?alt=media&amp;token=1f2e85ac-8853-4850-b023-dbc6a0cac279" alt=""><figcaption></figcaption></figure>

## Corner Radius

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2F7caiBoTtNIckPtIbIt3H%2FCorner.png?alt=media&amp;token=3bb04ffa-904a-4b0b-8778-19a873640a36" alt=""><figcaption></figcaption></figure>

## Accessibility

* **Keyboard Navigation:** Ensure tab buttons are fully navigable via keyboard. Users should be able to move between tabs using the arrow keys and activate a tab using the "Enter" or "Space" key.
* **Focus States:** Clearly define and style focus states for tab buttons to ensure they are visible and accessible for users who rely on keyboard navigation.
* **Loading Indicators:** If loading time is significant when switching tabs, consider using a loading indicator or spinner within the tab content area to enhance the user experience.
* **Tab Button Labels:** Keep tab button labels concise and clear, ideally one to two words that accurately describe the content within that tab.

## Example

* **Email Application:** In an email app, tab buttons are used to navigate between "Inbox," "Sent," "Drafts," and "Spam," allowing users to easily manage their emails without leaving the main interface.
* **E-Commerce Product Categories:** In an e-commerce app, tab buttons allow users to switch between different product categories like "Clothing," "Electronics," and "Home Goods" within the same page.
* **Profile Settings:** On a user's profile page, tab buttons can separate "Profile Information," "Security Settings," and "Connected Accounts" for easy access to different settings.
* **Project Management Tool:** In a project management app, tab buttons can be used to navigate between "Overview," "Tasks," "Calendar," and "Files" within a single project interface.