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

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