## Tabs

```js
const [active, setActive] = React.useState(1);
<SilkeBox column gap="m">
  <SilkeTabs>
    {[1, 2, 3, 4].map((tab) => (
      <SilkeTab
        key={tab}
        label={'Tab ' + tab}
        disabled={tab === 3}
        active={tab === active}
        onClick={() => setActive(tab)}
      />
    ))}
  </SilkeTabs>
  <SilkeTabs size="s">
    {[1, 2, 3, 4].map((tab) => (
      <SilkeTab
        key={tab}
        label={'Tab ' + tab}
        disabled={tab === 3}
        active={tab === active}
        onClick={() => setActive(tab)}
      />
    ))}
  </SilkeTabs>

  <h1>Active tab {active}</h1>
</SilkeBox>;
```

## With icons

```js
const [active, setActive] = React.useState(1);
const icons = ['react', 'lock', 'user', 'add'];
<SilkeBox column gap="m">
  <SilkeTabs>
    {[1, 2, 3, 4].map((tab) => (
      <SilkeTab
        key={tab}
        label={'Tab ' + tab}
        disabled={tab === 3}
        active={tab === active}
        onClick={() => setActive(tab)}
        icon={icons[tab - 1]}
      />
    ))}
  </SilkeTabs>
  <SilkeTabs size="s">
    {[1, 2, 3, 4].map((tab) => (
      <SilkeTab
        key={tab}
        label={'Tab ' + tab}
        disabled={tab === 3}
        active={tab === active}
        onClick={() => setActive(tab)}
        icon={icons[tab - 1]}
      />
    ))}
  </SilkeTabs>

  <h1>Active tab {active}</h1>
</SilkeBox>;
```

## With icon colors

```js
const [active, setActive] = React.useState(1);
const iconColors = ['default', 'neutral', 'accent', 'error', 'success', 'warning'];

<SilkeBox column gap="m">
  <SilkeTabs>
    {iconColors.map((color) => (
      <SilkeTab
        key={color}
        label={'Tab ' + color}
        active={color === active}
        icon="react"
        iconColor={color}
        onClick={() => setActive(color)}
      />
    ))}
  </SilkeTabs>
  <SilkeTabs size="s">
    {iconColors.map((color) => (
      <SilkeTab
        key={color}
        label={'Tab ' + color}
        active={color === active}
        icon="react"
        iconColor={color}
        onClick={() => setActive(color)}
      />
    ))}
  </SilkeTabs>

  <h1>Active tab {active}</h1>
</SilkeBox>;
```