> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thehuxdesign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> Organize content into multiple panels with tab navigation

# HuxTabs

The HuxTabs component provides a clean and modern way to organize content into multiple panels with tab navigation. It supports multiple variants, sizes, and includes built-in theme awareness.

## Basic Usage

```dart theme={null}
import 'package:hux/hux.dart';

HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Overview',
      content: Text('Overview content goes here'),
    ),
    HuxTabItem(
      label: 'Settings',
      content: Text('Settings content goes here'),
    ),
    HuxTabItem(
      label: 'Profile',
      content: Text('Profile content goes here'),
    ),
  ],
  onTabChanged: (index) => print('Tab changed to $index'),
)
```

## Variants

### Default

The default variant displays tabs with an underline indicator.

```dart theme={null}
HuxTabs(
  variant: HuxTabVariant.default_,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

### Pill

The pill variant displays tabs with a background indicator that highlights the active tab.

```dart theme={null}
HuxTabs(
  variant: HuxTabVariant.pill,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

### Minimal

The minimal variant displays tabs without any indicator, relying on text color changes.

```dart theme={null}
HuxTabs(
  variant: HuxTabVariant.minimal,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

## Sizes

### Small

```dart theme={null}
HuxTabs(
  size: HuxTabSize.small,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

### Medium (Default)

```dart theme={null}
HuxTabs(
  size: HuxTabSize.medium,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

### Large

```dart theme={null}
HuxTabs(
  size: HuxTabSize.large,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

## With Icons

Add icons to your tabs for better visual hierarchy.

```dart theme={null}
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Dashboard',
      icon: Icons.dashboard,
      content: Text('Dashboard content'),
    ),
    HuxTabItem(
      label: 'Settings',
      icon: Icons.settings,
      content: Text('Settings content'),
    ),
    HuxTabItem(
      label: 'Profile',
      icon: Icons.person,
      content: Text('Profile content'),
    ),
  ],
)
```

## With Badges

Add badges to indicate notifications or counts.

```dart theme={null}
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Messages',
      icon: Icons.message,
      badge: HuxBadge(
        text: '3',
        variant: HuxBadgeVariant.destructive,
      ),
      content: Text('Messages content'),
    ),
    HuxTabItem(
      label: 'Notifications',
      icon: Icons.notifications,
      badge: HuxBadge(
        text: '12',
        variant: HuxBadgeVariant.primary,
      ),
      content: Text('Notifications content'),
    ),
  ],
)
```

## Scrollable Tabs

Enable horizontal scrolling for tabs that don't fit in the available space.

```dart theme={null}
HuxTabs(
  isScrollable: true,
  tabs: List.generate(10, (index) => HuxTabItem(
    label: 'Tab ${index + 1}',
    content: Text('Content ${index + 1}'),
  )),
)
```

## Tab Alignment

Control how tabs are aligned within the available space.

```dart theme={null}
HuxTabs(
  alignment: TabAlignment.center,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)
```

## Disabled Tabs

Mark individual tabs as disabled to prevent interaction.

```dart theme={null}
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Available Tab',
      content: Text('This tab is available'),
    ),
    HuxTabItem(
      label: 'Disabled Tab',
      content: Text('This tab is disabled'),
      isDisabled: true,
    ),
  ],
)
```

## Expanding Content

By default, tab content takes only the space it needs. Use `expandContent` to fill available vertical space.

```dart theme={null}
// Content fills available height
HuxTabs(
  expandContent: true,
  tabs: [
    HuxTabItem(
      label: 'Overview',
      content: Container(
        color: Colors.blue.shade100,
        child: Center(child: Text('Fills available space')),
      ),
    ),
    HuxTabItem(
      label: 'Settings',
      content: Container(
        color: Colors.green.shade100,
        child: Center(child: Text('Also fills available space')),
      ),
    ),
  ],
)
```

<Callout type="tip">
  Set `expandContent: true` when tabs are in a bounded container (like an Expanded widget) and you want the content to fill available space. Leave it `false` (default) for better compatibility with unbounded layouts.
</Callout>

## Controlled Tabs

Control the active tab programmatically.

```dart theme={null}
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _activeTab = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            HuxButton(
              onPressed: () => setState(() => _activeTab = 0),
              child: Text('Go to Tab 1'),
            ),
            SizedBox(width: 8),
            HuxButton(
              onPressed: () => setState(() => _activeTab = 1),
              child: Text('Go to Tab 2'),
            ),
          ],
        ),
        SizedBox(height: 16),
        HuxTabs(
          initialIndex: _activeTab,
          onTabChanged: (index) => setState(() => _activeTab = index),
          tabs: [
            HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
            HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
          ],
        ),
      ],
    );
  }
}
```

## API Reference

### HuxTabs

| Property        | Type                 | Default                  | Description                                                    |
| --------------- | -------------------- | ------------------------ | -------------------------------------------------------------- |
| `tabs`          | `List<HuxTabItem>`   | **required**             | List of tab items to display                                   |
| `initialIndex`  | `int`                | `0`                      | Initial active tab index                                       |
| `variant`       | `HuxTabVariant`      | `HuxTabVariant.default_` | Visual variant of the tabs                                     |
| `size`          | `HuxTabSize`         | `HuxTabSize.medium`      | Size variant of the tabs                                       |
| `onTabChanged`  | `ValueChanged<int>?` | `null`                   | Callback when the active tab changes                           |
| `isScrollable`  | `bool`               | `false`                  | Whether tabs should be scrollable horizontally                 |
| `alignment`     | `TabAlignment`       | `TabAlignment.start`     | Alignment of tabs within the available space                   |
| `expandContent` | `bool`               | `false`                  | Whether content should expand to fill available vertical space |

### HuxTabItem

| Property     | Type        | Default      | Description                                          |
| ------------ | ----------- | ------------ | ---------------------------------------------------- |
| `label`      | `String`    | **required** | The text label displayed on the tab                  |
| `content`    | `Widget`    | **required** | The content widget displayed when this tab is active |
| `icon`       | `IconData?` | `null`       | Optional icon displayed before the label             |
| `badge`      | `Widget?`   | `null`       | Optional badge widget displayed after the label      |
| `isDisabled` | `bool`      | `false`      | Whether this tab is disabled                         |

### HuxTabVariant

* `HuxTabVariant.default_` - Default tabs with underline indicator
* `HuxTabVariant.pill` - Pill-style tabs with background indicator
* `HuxTabVariant.minimal` - Minimal tabs with no indicator

### HuxTabSize

* `HuxTabSize.small` - Small tabs for compact layouts
* `HuxTabSize.medium` - Medium tabs for standard layouts (default)
* `HuxTabSize.large` - Large tabs for prominent navigation

## Theming

HuxTabs automatically adapts to light and dark themes using HuxTokens. The component uses the following design tokens:

* `HuxTokens.tabActiveBackground` - Background color for active tab
* `HuxTokens.tabActiveText` - Text color for active tab
* `HuxTokens.tabInactiveBackground` - Background color for inactive tab
* `HuxTokens.tabInactiveText` - Text color for inactive tab
* `HuxTokens.tabHoverBackground` - Hover background color for tabs
* `HuxTokens.tabBorder` - Border color for tab container
* `HuxTokens.tabIndicator` - Indicator color for active tab

<Callout type="info">
  The tabs component follows Hux UI design principles with consistent spacing, typography, and color usage. All variants automatically adapt to your theme configuration.
</Callout>