# Component/LineTabs

> Props: component-linetabs.props.txt

## Examples


### Base

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

### Dense

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

### Fill

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

### Large Size

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

### No Side Padding

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

### No Top Padding

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

### 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 }}>
        <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
          {Array.from({ length: 50 }, (_, i) => {
            return (
              <LineTab id={`tab-${i + 1}`} key={i}>
                {`Label-${i}`}
              </LineTab>
            );
          })}
        </LineTabs>
      </div>
    );
  },
  args: {}
}
```

### With Badge

```tsx
{
  render: args => {
    const [activeTab, setActiveTab] = useState('tab-1');
    const handleChange = (activeTab: string) => {
      setActiveTab(activeTab);
    };
    const tabItems = [{
      id: 'tab-1',
      label: 'Label',
      is_new: true,
      has_notification: true,
      popover: {
        title: 'Title',
        description: 'Description'
      },
      is_beta: true,
      number_label: 0
    }, {
      id: 'tab-2',
      label: 'Label',
      is_new: true
    }, {
      id: 'tab-3',
      label: 'Label',
      has_notification: true
    }, {
      id: 'tab-4',
      label: 'Label',
      popover: {
        title: 'Title',
        description: 'Description'
      }
    }, {
      id: 'tab-4',
      label: 'Label',
      popover: {
        title: 'Title',
        description: 'Description'
      },
      number_label: 1000000
    }];
    return <LineTabs {...args} activeTabId={activeTab} onChange={handleChange}>
        {tabItems.map(({
        id,
        label,
        ...props
      }) => {
        return <LineTab id={id} key={id} {...props}>
              {label}
            </LineTab>;
      })}
      </LineTabs>;
  },
  args: {
    dense: true,
    width: 'fill'
  }
}
```