# Component/BoxTabs

> Props: component-boxtabs.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <BoxTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        <BoxTab id='tab-1'>Label</BoxTab>
        <BoxTab id='tab-2'>Label</BoxTab>
        <BoxTab id='tab-3'>Label</BoxTab>
        <BoxTab id='tab-4'>Label</BoxTab>
      </BoxTabs>;
  }
}
```

### Disabled

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (id: string) => setActiveTab(id);
    return <BoxTabs activeTabId={activeTab} onChange={handleChange}>
        <BoxTab id='tab-1'>Normal</BoxTab>
        <BoxTab id='tab-2' disabled>
          Disabled
        </BoxTab>
        <BoxTab id='tab-3' action={{
        onClick: () => alert('Dots clicked!')
      }}>
          Normal
        </BoxTab>
        <BoxTab id='tab-4' action={{
        onClick: () => alert('Dots clicked!')
      }} disabled>
          Disabled
        </BoxTab>
      </BoxTabs>;
  }
}
```

### Scroll

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    return <div style={{
      padding: '20px',
      backgroundColor: colors.gray50,
      width: 600
    }}>
        <BoxTabs {...args} activeTabId={activeTab} onChange={handleChange}>
          {Array.from({
          length: 20
        }, (_, i) => {
          return <BoxTab id={`tab-${i + 1}`} key={i}>
                {`Label-${i}`}
              </BoxTab>;
        })}
        </BoxTabs>
      </div>;
  }
}
```

### With Action Dropdown Item

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const tabs = [{
      id: 'tab-1',
      label: 'Selected'
    }, {
      id: 'tab-2',
      label: 'Unselected'
    }, {
      id: 'tab-3',
      label: 'Other Tab'
    }, {
      id: 'tab-4',
      label: 'Disabled Tab',
      disabled: true
    }];
    return <BoxTabs activeTabId={activeTab} onChange={setActiveTab}>
        {tabs.map(tab => <BoxTab key={tab.id} id={tab.id} disabled={tab.disabled} renderAction={({
        iconComponent: Icon,
        iconProps
      }) => <PopoverButton disabled={tab.disabled} renderButton={({
        buttonProps
      }) => {
        return <Stack align='center' {...buttonProps}>
                      <Icon {...iconProps} />
                    </Stack>;
      }} options={[{
        label: 'Option 1',
        value: 'option-1'
      }, {
        label: 'Option 2',
        value: 'option-2'
      }]} />}>
            {tab.label}
          </BoxTab>)}
      </BoxTabs>;
  }
}
```

### With Action Icon

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (id: string) => setActiveTab(id);
    return <BoxTabs activeTabId={activeTab} onChange={handleChange}>
        <BoxTab id='tab-1' action={{
        onClick: () => {
          alert('Dots clicked!');
        }
      }}>
          Selected
        </BoxTab>
        <BoxTab id='tab-2' iconComponent={IconCircleCheck} action={{
        onClick: () => {
          alert('Dots clicked!');
        }
      }}>
          Unselected (custom icon)
        </BoxTab>
      </BoxTabs>;
  }
}
```

### With Add Button

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const [tabs, setTabs] = useState([{
      id: 'tab-1',
      label: 'Label 1'
    }, {
      id: 'tab-2',
      label: 'Label 2'
    }]);
    const handleChange = (id: string) => {
      setActiveTab(id);
    };
    const handleAdd = () => {
      const newId = `tab-${tabs.length + 1}`;
      setTabs([...tabs, {
        id: newId,
        label: `Label ${tabs.length + 1}`
      }]);
      setActiveTab(newId);
    };
    return <BoxTabs activeTabId={activeTab} onChange={handleChange} onAdd={handleAdd}>
        {tabs.map(tab => <BoxTab id={tab.id} key={tab.id}>
            {tab.label}
          </BoxTab>)}
      </BoxTabs>;
  }
}
```

### With Dropdown Add Button

```tsx
{
  render: () => {
    const [activeTab, setActiveTab] = useState<string>('tab-1');
    const [tabs, setTabs] = useState([{
      id: 'tab-1',
      label: 'Label 1'
    }, {
      id: 'tab-2',
      label: 'Label 2'
    }]);
    const handleChange = (id: string) => {
      setActiveTab(id);
    };
    const handleAdd = () => {
      const newId = `tab-${tabs.length + 1}`;
      setTabs([...tabs, {
        id: newId,
        label: `Label ${tabs.length + 1}`
      }]);
      setActiveTab(newId);
    };
    return <BoxTabs activeTabId={activeTab} onChange={handleChange} renderAddAction={({
      iconComponent: Icon,
      iconProps
    }) => <PopoverButton onChange={handleAdd} renderButton={({
      buttonProps
    }) => <Stack align='center' justify='center' width='100%' height='100%' {...buttonProps}>
                <Icon {...iconProps} />
              </Stack>} options={[{
      label: 'Add tab',
      value: 'add-tab'
    }]} />}>
        {tabs.map(tab => <BoxTab id={tab.id} key={tab.id}>
            {tab.label}
          </BoxTab>)}
      </BoxTabs>;
  }
}
```