## Feature Examples
### Size
- description: Control the tab size with the `size` prop: - `medium` (default) is the standard used in common cases. - `small` fits into smaller elements and compact designs. - `tiny` is used for dense layouts.
- example:
```jsx
{}}>
}>
Medium tab 1
}>
Medium tab 2
}>
Medium tab 3
{}}>
}>
Small tab 1
}>
Small tab 2
}>
Small tab 3
{}}>
}>
Tiny tab 1
}>
Tiny tab 2
}>
Tiny tab 3
;
```
### Skin
- description: `skin` controls the overall visual style of the `VerticalTabs` container and items. - `standard` (default) - `light` - `neutral`
- example:
```jsx
() => {
const [activeTabs, setActiveTabs] = React.useState({
standard: 0,
light: 0,
neutral: 0,
});
const tabItems = [
{ id: 0, label: 'Overview' },
{ id: 1, label: 'Settings' },
{ id: 2, label: 'Billing' },
];
return (
Standard
setActiveTabs((prevTabs) => ({ ...prevTabs, standard: tabId }))
}
>
{tabItems.map((item) => (
{item.label}
))}
Light
setActiveTabs((prevTabs) => ({ ...prevTabs, standard: tabId }))
}
>
{tabItems.map((item) => (
{item.label}
))}
Neutral
setActiveTabs((prevTabs) => ({ ...prevTabs, standard: tabId }))
}
>
{tabItems.map((item) => (
{item.label}
))}
);
};
```
### Group title
- description: Group related tabs together under a title by using a `` wrapper.
- example:
```jsx
{}}>
Tab 1
Tab 2
Tab 3
;
```
### Selected tab
- description: Specify which tab is currently selected with the `activeTabId` prop.
- example:
```jsx
{}}>
Tab 1
Tab 2
Tab 3
;
```
## Common Use Case Examples
### Sidebar in a custom modal
- description: Place tabs inside a `` to create a sidebar with structured content.
- example:
```jsx
{}}
title="Account settings"
removeContentPadding
content={
{}}>
}>
Account info
}>
Login info
}>
Email preferences
}
/>;
```