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
Position: Top-center
Top: 9.4(PC) / 6.8(TB-MO)
Position: Bottom-right
Bottom: 2.4(PC) / 1.6(TB-MO)
Right 3.2(PC) / 2.4(TB-MO)
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
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
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
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | 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
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | 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
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us