Labels
Label 컴포넌트는 상태, 카테고리, 필터 등 다양한 정보를 간결하게 시각적으로 전달하는 UI 요소입니다.
Labels
Label 컴포넌트는 상태, 카테고리, 필터 등 다양한 정보를 간결하게 시각적으로 전달하는 UI 요소입니다.
Labels
Label 컴포넌트는 상태, 카테고리, 필터 등 다양한 정보를 간결하게 시각적으로 전달하는 UI 요소입니다.
Anatomy
ESSENTIAL
1. 레이블
라벨의 핵심 정보 전달 요소입니다. 간결한 문구로 상태, 주제, 혹은 분류를 나타냅니다.
2. 색상
상태 또는 카테고리를 구분합니다.
3. 형태
Rectangle, Round 형태를 선택할 수 있습니다.
Anatomy
ESSENTIAL
1. 레이블
라벨의 핵심 정보 전달 요소입니다. 간결한 문구로 상태, 주제, 혹은 분류를 나타냅니다.
2. 색상
상태 또는 카테고리를 구분합니다.
3. 형태
Rectangle, Round 형태를 선택할 수 있습니다.
Anatomy
ESSENTIAL
1. 레이블
라벨의 핵심 정보 전달 요소입니다. 간결한 문구로 상태, 주제, 혹은 분류를 나타냅니다.
2. 색상
상태 또는 카테고리를 구분합니다.
3. 형태
Rectangle, Round 형태를 선택할 수 있습니다.
State
Control
color
blue
pink
green
yellow
gray
invert-color
shape
Control
color
blue
pink
green
yellow
gray
invert-color
shape
Control
color
blue
pink
green
yellow
gray
invert-color
shape
Properties
size | L, M, S, XS | |||||
color | gray, purple, green, pink, yellow, blue, red, orange, invert-gray, invert-purple, invert-green, invert-pink, invert-yellow, invert-blue, invert-red, invert-orange | |||||
shape | rectangle, round | |||||
Properties
size | L, M, S, XS | |||||
color | gray, purple, green, pink, yellow, blue, red, orange, invert-gray, invert-purple, invert-green, invert-pink, invert-yellow, invert-blue, invert-red, invert-orange | |||||
shape | rectangle, round | |||||
Properties
size | L, M, S, XS | |||||
color | gray, purple, green, pink, yellow, blue, red, orange, invert-gray, invert-purple, invert-green, invert-pink, invert-yellow, invert-blue, invert-red, invert-orange | |||||
shape | rectangle, round | |||||
Spec
 | Spacing레이블 간의 간격은 4px ~ 6px을 사용합니다. |
Spec
Spacing
레이블 간의 간격은 4px ~ 6px을 사용합니다.
Spec
| Spacing레이블 간의 간격은 4px ~ 6px을 사용합니다. |
Usage
Do
역할별 사용을 권장합니다.
Don't
의미가 다른 상태에 동일 컬러를 사용하지 않습니다.
Usage
Do
역할별 사용을 권장합니다.
Don't
의미가 다른 상태에 동일 컬러를 사용하지 않습니다.
Usage
Do
역할별 사용을 권장합니다.
Don't
의미가 다른 상태에 동일 컬러를 사용하지 않습니다.