## Feature Examples

### Types
- description: Use the `type` prop to change the behavior of the tab item: - `tab` can be used to organize settings into logical categories. - `action` can be used as a button. - `title` can be used to maintain structure between tab elements.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <VerticalTabsItem type="tab">Vertical Tab</VerticalTabsItem>
  <VerticalTabsItem type="action"> Vertical Tab Action </VerticalTabsItem>
  <VerticalTabsItem type="title">Vertical Tab Title</VerticalTabsItem>
</StorybookComponents.Stack>;
```

### Affix
- description: Add more context to actions with affix icons: - Emphasize the tab action with a `prefixIcon`. - Indicate that the tab will open a popover or navigate users to another page with a `suffixIcon`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <VerticalTabsItem prefixIcon={<Icons.Add />}>Prefix icon</VerticalTabsItem>
  <VerticalTabsItem suffixIcon={<Icons.ChevronRight />}>
    Suffix icon
  </VerticalTabsItem>
</StorybookComponents.Stack>;
```

### Disabled
- description: Use the `disabled` prop to indicate that a tab can't be selected.
- example:
```jsx
<VerticalTabsItem disabled>Disabled tab</VerticalTabsItem>;
```

### Skin
- description: To specify the look of the item, use `skin` property: - `premium`- for the premium skin
- example:
```jsx
() => {
  const [activeTabId, setActiveTabId] = React.useState(0);

  return (
    <Box gap="20px" direction="vertical">
      <Box width="280px">
        <VerticalTabs
          activeTabId={activeTabId}
          onChange={(id) => setActiveTabId(Number(id))}
        >
          <VerticalTabs.TabItem id={0}>Default tab item</VerticalTabs.TabItem>
          <VerticalTabs.TabItem id={1} skin="premium">
            Premium tab item
          </VerticalTabs.TabItem>
          <VerticalTabs.TabItem id={2} skin="premium" disabled>
            Premium disabled
          </VerticalTabs.TabItem>
        </VerticalTabs>
      </Box>
    </Box>
  );
};
```