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
Padding
버튼 사이즈마다 최소 Padding 값은 순서대로 2.4rem, 1.6rem, 1.2rem입니다.
Width
버튼명 길이에 따라 유동적으로 넓이를 사용할 수 있습니다.
Full Width
Full width는 모바일 뷰에서 사용하는 것을 권장합니다.
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
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Usage
Usage
Usage
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
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
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
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
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
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
Properties
size | L, M, S |
state | default, hover, disabled |
icon-left | false, true |
Icon-right | false, true |
label | string |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us