Capsule Toggle Button

Primitive

사용자가 선택 여부를 켜거나 끌 수 있는 버튼 요소입니다.

Anatomy

anatomy
  1. Root : Button 컴포넌트를 감싸는 컨테이너 영역 - Primitive.Root
  2. Label : Button에 대한 정보를 전달하는 라벨 - Primitive.Label
  3. Icon : Button에 대한 정보를 전달하는 아이콘

Visual Options

PropertyValue
sizesmall, xsmall

디자인 결정 (Color)

StatePartAttributeValue
Enabled, UnselectedRootColor$semantic.color.secondary-low
Label, IconColor$scale.color.gray-900
Hovered, UnselectedRootColor$scale.color.gray-200
Label, IconColor$scale.color.gray-900
Pressed, UnselectedRootColor$scale.color.gray-200
Label, IconColor$scale.color.gray-900
Disabled, UnselectedRootColor$scale.color.gray-300
Label, IconColor$scale.color.gray-500
Enabled, SelectedRootColor$semantic.color.primary-low
Label, IconColor$semantic.color.primary
Hovered, SelectedRootColor$semantic.color.primary-low-hover
Label, IconColor$semantic.color.primary
Pressed, SelectedRootColor$semantic.color.primary-low-pressed
Label, IconColor$semantic.color.primary
Disabled, SelectedRootColor$scale.color.gray-300
Label, IconColor$scale.color.gray-500

디자인 결정 (Typography)

Size=Small

PartAttributeValue
LabelTypography$semantic.typography.label3-bold

Size=Xsmall

PartAttributeValue
LabelTypography$semantic.typography.label4-bold

디자인 결정 (Layout)

Size=Small

PartAttributeValue
RootMin Width54pt
Horizontal Padding14pt
Vertical Padding8pt
Corner Radius18pt
LabelText AlignCenter
IconSize16pt
Label / IconPadding4pt

Size=Xsmall

PartAttributeValue
RootMin Width40pt
Horizontal Padding10pt
Vertical Padding8pt
Corner Radius16pt
LabelText AlignCenter
IconSize12pt
Label / IconPadding2pt

디자인 결정 (Focus)

StatePartAttributeValue
FocusedRootOutline Color$scale.color.blue-600
Outline Width2pt