Label
입력 요소의 의미와 목적을 설명하는 텍스트입니다.
사용자가 어떤 정보를 입력하거나 선택해야 하는지 안내합니다.
컴포넌트 명세 (Component Specification)
Anatomy
Label
기본 기능
의미와 상태를 설명하는 솔리드 텍스트
시각 옵션
Icon
Stroke
Radius
Text Color
Background Color
Number
상태
해당 없음
내부 구성
icon
text
Strke
사이즈 가이드 (Size Guide )
라벨이 시용되는 목적에 따라서 크기를 구분하여 사용할 수 있습니다. 크기별로 32px, 26px, 24px, 22px, 16px로 제공합니다.
분류 (Variant)
Label의 다양한 분류 기준입니다.
아이콘 (Icon Variant)
좌측에 아이콘을 넣어
직관적인 라벨의 상태를 이해할 수 있습니다.
모서리 반경 (Radius Variant)
필요에 따라 4px의 레디우스 값 혹은 max로 완전히 둥근 라벨을
사용합니다.
스트로크 (Stroke Variant)
필요에 따라 바깥에 스트로크를 넣어 라벨을 강조합니다.
텍스트 색상 (Text Color Variant)
필요에 따라 라벨 내부의 텍스트 컬러를 변경해서 사용합니다.
배경 색상 (Background Color Variant)
필요에 따라 라벨 내부의 배경 컬러를 변경해서 사용합니다.
숫자 뱃지 (Number Bedge)
숫자를 강조하기 위한 숫자 뱃지입니다.
2글자가 넘어갈 경우 “Label 16px, character 2”로 따로 배정된 뱃지를 사용합니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Label이 배치되고 활용되는 패턴입니다.
라벨 간격 (Label Spacing)
라벨이 반복될 때, 가로로 4px, 세로는 6px의 간격을 두고 사용합니다.
숫자 뱃지 (Number Bedge)
숫자 뱃지는 메뉴 아이콘과 함께 완전히 겹쳐져서 사용합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
