# TabItem Examples (vue)

```vue
<template>
  <h1>DBTabItem Documentation Examples</h1>
  <h2>1. Default Tab Item</h2>
  <DBTabItem>Default Tab Item</DBTabItem>
  <h2>2. Active State</h2>
  <DBTabItem :active="true">Active Tab Item</DBTabItem>
  <h2>3. Disabled State</h2>
  <DBTabItem :disabled="true">Disabled Tab Item</DBTabItem>
  <h2>4. Icon Variants</h2>
  <DBTabItem icon="user">Tab Item with Icon</DBTabItem>
  <DBTabItem iconLeading="arrow-left"> Tab Item with Leading Icon </DBTabItem>
  <DBTabItem iconTrailing="arrow-right">
    Tab Item with Trailing Icon
  </DBTabItem>
  <h2>5. Label Property</h2>
  <DBTabItem label="Tab Item Label">Tab Item with Label</DBTabItem>
  <h2>6. Tab with Icon and Label</h2>
  <DBTabItem label="User Profile" icon="user" :showIcon="true"></DBTabItem>
</template>

<script setup lang="ts">
import { DBTabItem } from "@db-ux/v-v-core-components";
</script>
```