Label
Label
Label
Label 컴포넌트는 상태, 카테고리, 필터 등 짧은 정보를 압축해 전달하는 보조 UI 요소입니다. 행동을 유도하기보다는, 사용자가 콘텐츠를 빠르게 스캔할 수 있도록 정보의 성격과 분류를 시각적으로 구분하는 데 목적이 있습니다.
Label
Label 컴포넌트는 상태, 카테고리, 필터 등 짧은 정보를 압축해 전달하는 보조 UI 요소입니다. 행동을 유도하기보다는, 사용자가 콘텐츠를 빠르게 스캔할 수 있도록 정보의 성격과 분류를 시각적으로 구분하는 데 목적이 있습니다.
Label
Label 컴포넌트는 상태, 카테고리, 필터 등 짧은 정보를 압축해 전달하는 보조 UI 요소입니다. 행동을 유도하기보다는, 사용자가 콘텐츠를 빠르게 스캔할 수 있도록 정보의 성격과 분류를 시각적으로 구분하는 데 목적이 있습니다.
Anatomy
ESSENTIAL
1. 레이블
핵심 정보 전달 요소입니다. 상태(예: 진행 중, 완료), 주제(예: 디자인, 개발), 분류(예: 초급, 심화)처럼 짧고 명확한 단어/구로 구성합니다.
2. 형태
라벨의 시각적 성격을 결정하는 요소로 Rectangle, Round 형태를 선택할 수 있습니다. 같은 화면/리스트에서는 형태를 섞기보다 하나의 형태로 통일하는 것을 권장합니다.
Anatomy
ESSENTIAL
1. 레이블
핵심 정보 전달 요소입니다. 상태(예: 진행 중, 완료), 주제(예: 디자인, 개발), 분류(예: 초급, 심화)처럼 짧고 명확한 단어/구로 구성합니다.
2. 형태
라벨의 시각적 성격을 결정하는 요소로 Rectangle, Round 형태를 선택할 수 있습니다. 같은 화면/리스트에서는 형태를 섞기보다 하나의 형태로 통일하는 것을 권장합니다.
Anatomy
ESSENTIAL
1. 레이블
핵심 정보 전달 요소입니다. 상태(예: 진행 중, 완료), 주제(예: 디자인, 개발), 분류(예: 초급, 심화)처럼 짧고 명확한 단어/구로 구성합니다.
2. 형태
라벨의 시각적 성격을 결정하는 요소로 Rectangle, Round 형태를 선택할 수 있습니다. 같은 화면/리스트에서는 형태를 섞기보다 하나의 형태로 통일하는 것을 권장합니다.
State
State
State
Properties
Invert | false, true |
Shape | rectangle, round |
Color | purple, green, pink, yellow, gray, blue |
Size | L, M, S, XS |
Properties
Invert | false, true |
Shape | rectangle, round |
Color | purple, green, pink, yellow, gray, blue |
Size | L, M, S, XS |
Properties
Invert | false, true |
Shape | rectangle, round |
Color | purple, green, pink, yellow, gray, blue |
Size | L, M, S, XS |
Spec
 | Spacing여러 개 나열할 때는 간격을 4–6px 범위에서 사용합니다. |
Spec
Spacing
여러 개 나열할 때는 간격을 4–6px 범위에서 사용합니다.
Spec
| Spacing여러 개 나열할 때는 간격을 4–6px 범위에서 사용합니다. |
Usage
Do
역할에 따라 일관된 기준으로 사용합니다.
Don't
의미가 다른 상태에 동일한 컬러를 사용하지 않습니다.
Usage
Do
역할에 따라 일관된 기준으로 사용합니다.
Don't
의미가 다른 상태에 동일한 컬러를 사용하지 않습니다.
Usage
Do
역할에 따라 일관된 기준으로 사용합니다.
Don't
의미가 다른 상태에 동일한 컬러를 사용하지 않습니다.