# Tabs

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FarzQ9BOaoRDIFn2bTEO5%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.40.56.png?alt=media&#x26;token=7d5b2ce6-5666-4844-a425-3ac2d5712249" alt=""><figcaption></figcaption></figure>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>defaultValue</td><td>string</td><td>-</td><td>기본 선택 값</td></tr><tr><td>values</td><td>{<br>  key: string<br>  label: string<br>  hasBadge: boolean<br>  badgeCount: number<br>  hasDot: boolean<br>  content: React.ReactNode<br>  disabled: boolean<br>}[]</td><td>-</td><td>탭 리스트<br>key: 탭 고유 키 값<br>label: 탭 라벨 텍스트<br>hasBadge: badge 표시 여부<br>badgeCount: badge 카운트<br>hasDot: dot 표시 여부<br>content: 해당 탭의 페이지 컴포넌트<br>disabled: 비활성화 여부</td></tr><tr><td>variant</td><td>'button' | 'line'</td><td>-</td><td>타입</td></tr><tr><td>className</td><td>string</td><td>-</td><td>커스텀 스타일 적용</td></tr><tr><td>onValueChange</td><td>function</td><td>-</td><td>탭 선택 이벤트 핸들러</td></tr><tr><td>showBorder</td><td>boolean</td><td>-</td><td>하단 보더 표시 여부</td></tr><tr><td>borderStyle</td><td>string</td><td>-</td><td>보더 스타일</td></tr><tr><td>actionComponent</td><td>React.ReactNode</td><td>-</td><td>탭 우측 액션 컴포넌트 영역</td></tr></tbody></table>

### Usage

```typescript
<Tabs
  variant={'line'}
  defaultValue={'tab01'}
  values={[
    {
      key: 'tab01',
      label: '텍스트',
      content: <></>,
    },
    {
      key: 'tab02',
      label: '텍스트',
      content: <></>,
    },
  ]}
  onValueChange={() => {}}
/>
```
