---
id: tab_item
title: Tab.Item
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";

<IconsStyle />

They are individual item of the parent Tab.
They are clickable and allows users to click and change Tab.

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { Tab } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`TabItem`}</CodeBlock>
  </div>
</div>

### Active Tab Items

```tsx
<Tab.Item
  containerStyle={(active) => ({
    backgroundColor: active ? "red" : undefined,
  })}
>
  Tab
</Tab.Item>
```

## Props

:::note
Includes all [Button](button#props) props.
:::

<div class='table-responsive'>

| Name                 | Type                                          | Default | Description                                      |
| -------------------- | --------------------------------------------- | ------- | ------------------------------------------------ |
| `active`             | boolean                                       |         | Allows to define if TabItem is active.           |
| `buttonStyle`        | `ViewStyle or (active: boolean) => ViewStyle` | `none`  | Additional button style                          |
| `containerStyle`     | ViewStyle or (active: boolean) => ViewStyle   | `none`  | Additional Styling for button container.         |
| `dense`              | boolean                                       | `none`  | Dense Tab Item                                   |
| `iconContainerStyle` | ViewStyle or (active: boolean) => ViewStyle   |         | Additional Styling for Icon Component container. |
| `titleStyle`         | TextStyle or (active: boolean) => TextStyle   | `none`  | Additional button title style                    |
| `variant`            | `primary` \| `default`                        |         | Define the background Variant.                   |

</div>
