The Tabs component provides an intuitive way to organize and navigate between related content sections. It supports various configurations and is essential for creating organized user interfaces.

Simple Example

Here's a basic example showing how tabs work with content panels:

Dashboard Content
This is where you would display dashboard information and metrics.

Variations

You can customize the Tabs as per your requirements by passing various props to the component

By Variant

  • Standard: Default horizontal tabs with fixed positioning

  • Scrollable: Tabs that can scroll horizontally when overflowing

  • Full Width: Tabs that expand to fill the entire container width

By Orientation

  • Horizontal: Standard left-to-right tab layout

  • Vertical: Top-to-bottom tab layout, perfect for sidebars

By Content

  • Text Only: Tabs with only text labels

  • Icon Only: Tabs with only icons

  • Icon + Text: Tabs with both icons and text labels

  • With Badges: Tabs that can display notification badges

By State

  • Enabled: Interactive tabs that users can click

  • Disabled: Non-interactive tabs that are grayed out

  • Active: The currently selected tab

  • Inactive: Non-selected tabs available for interaction

By Customization

  • Colored Tabs: Custom indicator and text colors to match design system

  • Controlled Tabs: Programmatically controlled tab selection

  • Wrapped Labels: Tabs with longer labels that can wrap to multiple lines