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
Spacing
각 아이템의 우측에 여백을 포함하고 조합 간격은 0px로 설정합니다.
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 |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.
Usage
Do
기본 Tab Menu는 선택된(selected) 상태로 페이지가 렌더링되어 있어야 합니다.
Don't
2줄로 줄바꿈되는 탭 아이템을 만들지 않습니다.
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 |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | 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 |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | 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 |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
Properties
size | L,M,S |
color | gray,purple |
state | default,hover |
selected | false, true |
count | false, true |
left icon | false, true |
right icon | false, true |
right spacing | false, true |
border | false, true |
tab name | string |
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us