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
Behavior
Dropdown list와 함께 사용하고, z-index는 가장 우선으로 설정합니다.
Responsive Alignment
모바일에서는 Bottom Sheet 형태로 사용합니다.
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, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.
Usage
Do
선택지는 짧고 간결하게 작성해야 합니다.
Don't
선택지가 4개 미만인 경우 Select를 사용하지 않습니다.
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, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | 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, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | 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, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
Properties
size | L, S |
state | default, disabled, hover |
variant | default, error |
has value | false, true |
focused | false, true |
label | false, true |
dropdown | false, true |
background | false, true |
helper text | false, true |
label text | string |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us