## Feature Examples

### Disabled
- description: Use the `disabled` prop to indicate that a tab can't be selected.
- example:
```jsx
<VerticalTabs onChange={(/*id*/) => {}}>
  <VerticalTabs.IconItem disabled>
    <Icons.Delete></Icons.Delete>
  </VerticalTabs.IconItem>
  <VerticalTabs.IconItem disabled>
    <Icons.ColorDrop></Icons.ColorDrop>
  </VerticalTabs.IconItem>
  <VerticalTabs.IconItem>
    <Icons.ColorBucket></Icons.ColorBucket>
  </VerticalTabs.IconItem>
</VerticalTabs>;
```

## Common Use Case Examples

### Design Panels
- description: Use `<VerticalTabsIconItem/>` for panels navigation
- example:
```jsx
() => {
  const [value, setValue] = React.useState(50);
  const [opacity, setOpacity] = React.useState(60);
  return (
    <SidePanel
      skin="floating"
      width="288px"
      onCloseButtonClick={() => {}}
      onHelpButtonClick={() => {}}
    >
      <SidePanel.Header title="Events" />
      <Box height="480px">
        <VerticalTabs size="medium" activeTabId={1} onChange={() => {}}>
          <VerticalTabs.IconItem id={0}>
            <Icons.Compose></Icons.Compose>
          </VerticalTabs.IconItem>
          <VerticalTabs.IconItem id={1}>
            <Icons.ColorBucket></Icons.ColorBucket>
          </VerticalTabs.IconItem>
          <VerticalTabs.IconItem id={2}>
            <Icons.Edit></Icons.Edit>
          </VerticalTabs.IconItem>
        </VerticalTabs>
        <Divider direction="vertical" />
        <SidePanel.Content noPadding>
          <SidePanel.Field>
            <Button
              priority="secondary"
              size="tiny"
              prefixIcon={<Icons.ChevronLeft />}
            >
              Back
            </Button>
          </SidePanel.Field>
          <SidePanel.Section title="Border">
            <SidePanel.Field>
              <FormField
                label="Border color"
                labelSize="small"
                labelPlacement="left"
                labelWidth="1fr"
              >
                <Box width="30px" height="30px">
                  <FillPreview fill="#B7FFBA" aspectRatio={1} />
                </Box>
              </FormField>
            </SidePanel.Field>
            <SidePanel.Field>
              <FieldSet gap="small" legend="Border width" columns="auto 72px">
                <Slider
                  onChange={(nextValue) => setValue(Number(nextValue))}
                  min={0}
                  max={100}
                  value={value}
                  displayMarks={false}
                />
                <Input
                  value={value}
                  size="small"
                  suffix={<Input.Affix>px</Input.Affix>}
                  onChange={(e) => setValue(Number(e.target.value))}
                />
              </FieldSet>
            </SidePanel.Field>
          </SidePanel.Section>
        </SidePanel.Content>
      </Box>
    </SidePanel>
  );
};
```