Tab Menu - React

Tab Menu

Impor

TabVertical

import { TabVertical } from '@idds/react';

TabHorizontal

import { useState } from 'react';
import { TabHorizontal } from '@idds/react';

export default function App() {
  const [value, setValue] = useState('overview');

  const items = [
    { value: 'overview', label: 'Overview' },
    { value: 'details', label: 'Details' },
    { value: 'profile', label: 'Profile' },
  ];

  return (
    <TabHorizontal
      items={items}
      value={value}
      onChange={setValue}
      variant="outline"
    />
  );
}

Contoh Penggunaan

TabVertical

Contoh 1 - Outline Variant

Selected: overview

Contoh 2 - Button Brand Variant

Pilih Tema

Selected: overview

Contoh 3 - Button White Variant with useBrandColor

Selected: overview

Contoh 4 - Sizes

Small (sm)

Medium (md) - Default

TabHorizontal

Contoh 5 - Outline Variant

Selected: overview

Contoh 6 - Button Brand Variant

Pilih Tema

Selected: overview

Contoh 7 - Full Width

Selected: overview

Contoh 8 - Disabled States

Selected: overview

Props

TabVertical

Name	Type	Default	Required	Description
`items`	`TabVerticalItem[]`	—	Yes	Array of tab items. Each item has: { value: string, label: ReactNode, disabled?: boolean }
`value?`	`string`	—	No	Currently selected tab value (controlled).
`defaultValue?`	`string`	—	No	Default selected tab value (uncontrolled).
`onChange?`	`(value: string) => void`	—	No	Callback when tab changes.
`size?`	`'sm' \| 'md'`	`'md'`	No	Size variant: sm (14px/36px, mobile: 12px/32px) or md (16px/40px, mobile: 14px/36px).
`variant?`	`'button-brand' \| 'outline' \| 'button-white'`	`'outline'`	No	Visual variant of the tabs.
`useBrandColor?`	`boolean`	`false`	No	Whether to use brand primary color for outline and button-white variants.
`disabled?`	`boolean`	`false`	No	Whether tabs are disabled.
`className?`	`string`	`''`	No	Custom class name for container.
`containerClassName?`	`string`	`''`	No	Custom class name for tab container.
`tabClassName?`	`string`	`''`	No	Custom class name for individual tabs.
`width?`	`string \| number`	`'200px'`	No	Width of the vertical tab container.

TabHorizontal

Name	Type	Default	Required	Description
`items`	`TabHorizontalItem[]`	—	Yes	Array of tab items. Each item has: { value: string, label: ReactNode, disabled?: boolean }
`value?`	`string`	—	No	Currently selected tab value (controlled).
`defaultValue?`	`string`	—	No	Default selected tab value (uncontrolled).
`onChange?`	`(value: string) => void`	—	No	Callback when tab changes.
`size?`	`'sm' \| 'md'`	`'md'`	No	Size variant: sm (14px/36px, mobile: 12px/32px) or md (16px/40px, mobile: 14px/36px).
`variant?`	`'button-brand' \| 'outline' \| 'button-white'`	`'outline'`	No	Visual variant of the tabs.
`fullWidth?`	`boolean`	`false`	No	Whether tabs should fill full width with flex-1.
`useBrandColor?`	`boolean`	`false`	No	Whether to use brand primary color for outline and button-white variants.
`disabled?`	`boolean`	`false`	No	Whether tabs are disabled.
`className?`	`string`	`''`	No	Custom class name for container.
`containerClassName?`	`string`	`''`	No	Custom class name for tab container.
`tabClassName?`	`string`	`''`	No	Custom class name for individual tabs.