CoreSegmentedControl

Usage

기본 사용법 (단일 선택)

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup size="md">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
  >
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '2'} 
    onClick={() => setSelected('2')}
    disabled
  >
    Tab3 (disabled)
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '3'} 
    onClick={() => setSelected('3')}
  >
    Tab4
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

다중 선택

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';

const [selected, setSelected] = useState<string[]>([]);

const handleClick = (value: string) => {
  if (selected.includes(value)) {
    setSelected(selected.filter((item) => item !== value));
  } else {
    setSelected([...selected, value]);
  }
};

<CoreSegmentedControlGroup size="md">
  <CoreSegmentedControl 
    selected={selected.includes('0')} 
    onClick={() => handleClick('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected.includes('1')} 
    onClick={() => handleClick('1')}
  >
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected.includes('2')} 
    onClick={() => handleClick('2')}
    disabled
  >
    Tab3 (disabled)
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected.includes('3')} 
    onClick={() => handleClick('3')}
  >
    Tab4
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

아이콘만 사용

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';
import { IconSearchOutline, IconCloseOutline, IconAddOutline, IconDiamondOutline } from '@featuring-corp/icons';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup size="md">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
    leadingElement={<IconSearchOutline />}
  />
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
    leadingElement={<IconCloseOutline />}
  />
  <CoreSegmentedControl 
    selected={selected === '2'} 
    onClick={() => setSelected('2')}
    leadingElement={<IconAddOutline />}
    disabled
  />
  <CoreSegmentedControl 
    selected={selected === '3'} 
    onClick={() => setSelected('3')}
    leadingElement={<IconDiamondOutline />}
  />
</CoreSegmentedControlGroup>

Leading Element와 Trailing Element

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';
import { IconSearchOutline, IconCloseOutline } from '@featuring-corp/icons';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup size="md">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
    leadingElement={<IconSearchOutline />}
    trailingElement={<IconCloseOutline />}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
    leadingElement={<IconSearchOutline />}
  >
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

크기 설정

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

// Small
<CoreSegmentedControlGroup size="sm">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
  >
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

// Medium
<CoreSegmentedControlGroup size="md">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
  >
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

// Large
<CoreSegmentedControlGroup size="lg">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
  >
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

세로 방향

import { useState } from 'react';
import { CoreSegmentedControl, CoreSegmentedControlGroup } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup size="md" orientation="vertical">
  <CoreSegmentedControl 
    selected={selected === '0'} 
    onClick={() => setSelected('0')}
  >
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '1'} 
    onClick={() => setSelected('1')}
  >
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl 
    selected={selected === '2'} 
    onClick={() => setSelected('2')}
  >
    Tab3
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

Props

ComponentPropsWithoutRef<'button'> 타입을 확장한 컴포넌트입니다.

Prop

Type

SegmentedControlSizeType

Prop

Type

스타일

기본 스타일 속성

SegmentedControlGroup:

display: flex
gap: spacing-100 (4px)
padding: spacing-100 (4px)
border-radius: radius-100
background-color: background-1
box-shadow: inset 0 0 0 1px border[1]
transition: 0.2s

SegmentedControl:

display: flex
justify-content: center
border-radius: radius-50
transition: 0.2s

Size Variants (Group)

Size	Height
`sm`	`26px`
`md`	`32px`
`lg`	`40px`

Size Variants (Control Item)

Size	Height	Typography	Gap	Padding X (Icon Only)	Padding X (Text)
`sm`	`18px`	`heading[1]`	`spacing-100` (4px)	`spacing-50` (2px)	`spacing-200` (8px)
`md`	`24px`	`heading[2]`	`spacing-100` (4px)	`spacing-150` (6px)	`spacing-250` (10px)
`lg`	`32px`	`heading[2]`	`spacing-150` (6px)	`spacing-200` (8px)	`spacing-300` (12px)

States (상태별 토큰)

SegmentedControl Item:

Default: 기본 스타일
Hover: color: toggle-primary-1, background-color: toggle-hover-bg
Active: color: toggle-primary-2
Selected: background-color: gray-15
Disabled: color: toggle-disabled-text

On this page