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
Height
모든 해상도에서 Viewport 80%를 최대 높이로 설정합니다.
Scroll Behavior
바디에서 스크롤이 생기는 경우 헤더에 border-bottom이 적용됩니다.
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
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
Usage
Do
바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.
Don't
close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.
Don't
인풋이 있는 경우, close(닫기)를 생략하면 안됩니다
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
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-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
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-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
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
Properties
header-beakpoint | PC,MO |
header-type | default,image |
header-bottom line | false, true |
header-close-button | false, true |
header-icon | false, true |
header-text | string |
body-beakpoint | PC,MO |
body-text | string |
footer-beakpoint | PC,MO |
footer-s-button | false, true |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us