Primary Button
ESSENTIAL
레이블
OPTIONAL
아이콘
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Buttons
Primary Button은 제출, 확인, 구매, 등록 등 주요 행동 유도, 결정할 때 사용합니다.
Primary Button
ESSENTIAL
레이블
OPTIONAL
아이콘
Primary Button
ESSENTIAL
레이블
OPTIONAL
아이콘
State
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Properties
Content
Properties
Content
Properties
Content
Spec
Content
Spec
Content
Spec
Function
sorting, checkbox 기능을 활용할 수 있습니다.
Type
다양한 타입을 추가해서 조합할 수 있습니다.
Secondary Button
ESSENTIAL
ㅏㅜㅏㅓㅏㅏ
OPTIONAL
Secondary Button
ESSENTIAL
ㅏㅜㅏㅓㅏㅏ
OPTIONAL
Secondary Button
ESSENTIAL
ㅏㅜㅏㅓㅏㅏ
OPTIONAL
State
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Usage
Do
데이터가 없을 때 empty section 사용을 권장합니다.
Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고 스크롤 가능한 형태로 적용해야 합니다.
Usage
Do
데이터가 없을 때 empty section 사용을 권장합니다.
Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고 스크롤 가능한 형태로 적용해야 합니다.
Usage
Do
데이터가 없을 때 empty section 사용을 권장합니다.
Don't
모바일 환경에서는 컨테이너에 Fill을 적용하지 않고 스크롤 가능한 형태로 적용해야 합니다.
Tertiary Button
ESSENTIAL
OPTIONAL
Tertiary Button
ESSENTIAL
OPTIONAL
Tertiary Button
ESSENTIAL
OPTIONAL
State
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Text Button
ESSENTIAL
OPTIONAL
Text Button
ESSENTIAL
OPTIONAL
Text Button
ESSENTIAL
OPTIONAL
State
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Control
state
default
hover
disabled
Left Icon
Right Icon
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Icon Button
ESSENTIAL
OPTIONAL
Icon Button
ESSENTIAL
OPTIONAL
Icon Button
ESSENTIAL
OPTIONAL
State
Control
state
default
hover
disabled
Control
state
default
hover
disabled
Control
state
default
hover
disabled
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
Properties
type | text, icon, button, person, label |
first cell | false, true |
last cell | false, true |
label | false, true |
icon | false, true |
button | false, true |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us